React router v6 not rendering

Question

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;

Answer 1

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>
  );
}

Answer 2

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> ); } }