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