the routes change but the pages are not shown in my react app

user_16371993 0
Viewed 610

i just used a Navbar from bootstrap and i added my links of components , i used to react-router-Dom , the path is working but the pages are not changed , should i change something in my Navbar ? it's from bootstrap 5 , the conatian of components are not shown .

App.js


import './App.css';
import Navbar from './components/Navbar';
import { BrowserRouter as Router , Route , Routes } from 'react-router-dom';
import Home from './screens/Home';
import About from './screens/About';
import Contact from './screens/Contact';
import traditions from './screens/Traditions';
import Histoire from './screens/Histoire';
import Monuments from './screens/Monuments';

function App() {
  return (
   
    <>
<Router>
<Navbar/>
<Routes>
     <Route exact path="/"  component={Home}/>
     <Route exact path="/about"  component={About}/>
     <Route exact path="/contact"  component={Contact}/>
     <Route exact path="/traditions"  component={traditions}/>
     <Route exact path="/histoire"  component={Histoire}/>
     <Route exact path="/Monuments"  component={Monuments}/>
     </Routes>
     </Router>
    </>
    
  );
}

export default App;

Navbar.js

import React from 'react'

const Navbar = () => {
    return (
        
        <div class="container">
         <nav class="navbar navbar-expand-lg navbar-light bg-light" >
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/">home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/about">about</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/contact">contact</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="Products" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Products
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="/monuments">monunments</a></li>
            <li><a class="dropdown-item" href="/traditions">traditions</a></li>
            <li><a class="dropdown-item" href="/histoire">histoire</a></li>
          </ul>
        </li>
      </ul>
     
    </div>
  </div>
</nav>   
        </div>
    )
}

export default Navbar
bootstrap-5 react-router-dom react-router reactjs
5 Answers

If you are not using version 6 react-router-dom, you should use Switch instead of Routes

<>
  <Router>
    <Navbar/>
    <Switch>
      <Route exact path="/" component={Home}/>
      <Route exact path="/about" component={About}/>
      <Route exact path="/contact" component={Contact}/>
      <Route exact path="/traditions" component={traditions}/>
      <Route exact path="/histoire" component={Histoire}/>
      <Route exact path="/Monuments" component={Monuments}/>
    </Switch>
  </Router>
</>

But if you are using version 6, your code should look like this:

<>
  <Router>
    <Navbar/>
    <Routes>
      <Route path="/" element={<Home />}/>
      <Route path="/about" element={<About />}/>
      <Route path="/contact" element={<Contact />}/>
      <Route path="/traditions" element={<traditions />}/>
      <Route path="/histoire" element={<Histoire />}/>
      <Route path="/Monuments" element={<Monuments />}/>
    </Routes>
  </Router>
</>
user_151639700

use / on the last. when react router encounter / it will render your home page

<>
  <Router>
    <Navbar/>
    <Switch>
      <Route path="/about" component={About}/>
      <Route path="/contact" component={Contact}/>
      <Route path="/traditions" component={traditions}/>
      <Route path="/histoire" component={Histoire}/>
      <Route path="/Monuments" component={Monuments}/>
      <Route path="/" component={Home}/>
    </Switch>
  </Router>
</>
user_118157980

In react-router-dom version 6 the Route component API changed significantly. There is no longer component and render props, they were replaced by the element prop that takes a JSX literal instead of a reference to a React component or a function that returns JSX.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/contact" element={<Contact />} />
  <Route path="/traditions" element={<Traditions />} />
  <Route path="/histoire" element={<Histoire />} />
  <Route path="/Monuments" element={<Monuments />} />
</Routes>

Side Note: In Navbar component change all the "class" attributes to "className". If the raw anchor <a /> aren't working try using the Link component from react-router-dom.

user_86908570 

import './App.css';
import Navbar from './components/Navbar';
import { BrowserRouter as Router , Route , Routes } from 'react-router-dom';
import Home from './screens/Home';
import About from './screens/About';
import Contact from './screens/Contact';
import Traditions from './screens/Traditions';
import Histoire from './screens/Histoire';
import Monuments from './screens/Monuments';

function App() {
  return (
   
    <>
<Router>
<Navbar/>
<Routes>
     <Route exact path="/"  element ={<Home/>}/>
     <Route exact path="/about"  element ={<About/>}/>
     <Route exact path="/contact"  element ={<Contact/>}/>
     <Route exact path="/traditions"  element ={<Traditions/>}/>
     <Route exact path="/histoire"  element ={<Histoire/>}/>
     <Route exact path="/Monuments"  element ={<Monuments/>}/>
     </Routes>
     </Router>
    </>
    
  );
}

export default App;
user_163719930

First Solution and Best Solution:

  1. If you use are using React Router 5.3.x, check whether it is 5.3.3 in your package.json file.

  2. If it is not 5.3.3 uninstall the last version then install the bug-free version which has been resolved by John and updated in version 5.3.3.

  • npm uninstall -S react-router-dom
  • npm install -S react-router-dom@5.3.3

Second Solution:

React has launched its StrictMode in its latest update. you can see it in an index.js file

index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

So here your React Router is in the child component. And we have to make it a parent component.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
  <React.StrictMode>
    <App />
  </React.StrictMode>
</BrowserRouter>
);

Third Solution:

Remove the Strict mode from the index.js file

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
    <App />
</BrowserRouter>
);
user_189618140
Related