React multiple pages using react-router-dom

Question

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 ?

Youssouf Oumar · Accepted Answer · 2022-03-05 13:56:30Z

1

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

edited Mar 5, 2022 at 13:56

answered Mar 5, 2022 at 13:49

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

M.El Yaakoubi Over a year ago

I tried this solution but the problem is the same !

Youssouf Oumar Over a year ago

You had some other typo problem, please take my updated answer.

Ajay Gupta · Accepted Answer · 2022-03-05 13:49:14Z

1

/ is missing in your code and also use exact property to match exact URL.

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

answered Mar 5, 2022 at 13:49

Ajay Gupta

8617 silver badges12 bronze badges

Collectives™ on Stack Overflow

React multiple pages using react-router-dom

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related