router is not working perfectly in react-router-dom-v6

Question

I m new to react and i am facing issues in react-router-dom(version-6)
When i try to route 3 files in app.js

App.js

import logo from './logo.svg';
import './App.css';
import Navbar from './components/Navbar';
import Home from './components/Home';
import About from './components/About';
import Services from './components/Services';
import Contact from './components/Contact';
import Footer from './components/Footer';
// import {Route, Routes} from 'react-router-dom'

// This is a React Router v6 app
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet
} from 'react-router-dom';

function App() {
  return (
    <div>
       <Navbar />
      
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/service" element={<Service />} />
          
        </Routes>
      
        
      {/* <About /> */}

      <Footer />

    </div>

  );
}

export default App;

i am getting only home page result only, other two(About, Services) things are not getting
to resolve this issue what should i need to do?
Please anyone help me from this
Thanks.

Answer 1

rename BrowserRouter as Router and remove the div

import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link,
    Outlet
} from 'react-router-dom';


 function App() {

    return (
       <Router>
         <Navbar />
         <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/service" element={<Service />} />
         </Routes>
         <Footer />
      </Router>
   );
}