React router v6 not rendering

user_17838541 0
Viewed 5968

I tried using react router but it doesn't work. I already know that React Router Dom v6 has changed from Switch to Routes but when I run the program it just shows a blank screen. Does anyone know how to fix this? Here is my code:

routerURL.js

import React, { Component } from "react";
import { BrowserRouter as Route, Router } from "react-router-dom";
import Contact from "../component/Contact";
import Details from "../component/Details";
import Home from "../component/Home";

export default class routerURL extends Component {
  render() {
    return (
      <Router>
        <div>
          <Route exact path="/" element={<Home />}></Route>
          <Route path="/details" element={<Details />}></Route>
          <Route path="/contact" element={<Contact />}></Route>
        </div>
      </Router>
    );
  }
}

App.js

import "./../css/App.css";
import Nav from "./Nav";
import Footer from "./Footer";
import RouterURL from "../router/RouterURL";
function App() {
  return (
    <div>
      <Nav />
      <RouterURL />
      <Footer />
    </div>
  );
}

export default App;
react-router-dom reactjs
2 Answers

You import BrowswerRouter as Route. You will want to fix the imports, and ensure that your nav/footer are wrapped in a router if they are rendering any links. The Route components should be wrapped in a Routes component that manages the route matching.

routerURL.js

import { Routes, Route } from "react-router-dom";
import Contact from "../component/Contact";
import Details from "../component/Details";
import Home from "../component/Home";

export default class routerURL extends Component {
  render() {
    return (
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/details" element={<Details />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    );
  }
}

App.js

import { BrowserRouter as Router } from "react-router-dom";
import "./../css/App.css";
import Nav from "./Nav";
import Footer from "./Footer";
import RouterURL from "../router/RouterURL";

function App() {
  return (
    <Router>
      <div>
        <Nav />
        <RouterURL />
        <Footer />
      </div>
    </Router>
  );
}
user_86908570

You must have to import BrowseRouter as Router and then Routes, Route. Its mandatory to wrap all of your routings inside the Router. Then wrap each Route inside Routes. Also the Route has no closing tag in react-router v6. Route is self closing tag.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Contact from "../component/Contact";
import Details from "../component/Details";
import Home from "../component/Home";

export default class routerURL extends Component {
  render() {
    return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/details" element={<Details />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
     </Router>
    );
  }
}

user_192168670
Related