React multiple pages using react-router-dom

I m trying to make multiple react pages but react doesn’t show any of the new pages . I think my code is correct , I am using npm install react-router-dom@6 and this is my code : Index.js

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route path="pricing" element={<Pricing />} />
        <Route path="contact" element={<Contact />} />
      </Route>
    </Routes>
  </BrowserRouter>,
  document.getElementById('root')
);

in the Navbar.jsx :

<Link to="/pricing">Pricing</Link>
<Link to="/contact">Contact</Link>

and for example Pricing.js :

        <div className='Pricing'>
            <Navbar />
        </div>

Any idea how to fix this ? where I have missed it exactly ?

Answer

First you are missing / on some path. Second, the first Route will catch all of them, because all of them start with /. To avoid that, you need the keyword exact, like so:

ReactDOM.render(
  <BrowserRouter>
    <Routes>
        <Route exact path="/" element={<App />} />
        <Route exact path="/pricing" element={<Pricing />} />
        <Route exact path="/contact" element={<Contact />} />
    </Routes>
  </BrowserRouter>,
  document.getElementById('root')
);

Advertisement

Answer