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 >
         <nav  >
  <div >
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
    </button>
    <div  id="navbarSupportedContent">
      <ul >
        <li >
          <a  aria-current="page" href="/">home</a>
        </li>
        <li >
          <a  href="/about">about</a>
        </li>
        <li >
          <a  href="/contact">contact</a>
        </li>
        <li >
          <a  href="Products" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Products
          </a>
          <ul  aria-labelledby="navbarDropdown">
            <li><a  href="/monuments">monunments</a></li>
            <li><a  href="/traditions">traditions</a></li>
            <li><a  href="/histoire">histoire</a></li>
          </ul>
        </li>
      </ul>
     
    </div>
  </div>
</nav>   
        </div>
    )
}

export default Navbar

CodePudding user response：

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>
</>

CodePudding user response：

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.

CodePudding user response：

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;

CodePudding user response：

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>
</>