路线发生变化，但页面未显示在我的反应应用程序中

Question

我刚刚使用了引导程序中的导航栏，并添加了组件链接，我曾经使用 react-router-Dom，路径正常但页面没有更改，我应该更改导航栏中的内容吗？它来自 bootstrap 5 ，未显示组件的 conatian 。

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

Answer 1

在最后使用/。当 react router 遇到/ 它会渲染你的主页

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

Answer 2

在 react-router-dom 版本 6 中，Route 组件 API 发生了显着变化。不再有 component 和 render 道具，它们被 element 道具取代，该道具采用 JSX 文字 而不是对 React 组件的引用或返回 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>

旁注：在Navbar 组件中，将所有"class" 属性更改为"className"。如果原始锚<a /> 不起作用，请尝试使用来自react-router-dom 的Link 组件。

Answer 3

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;

Answer 4

如果您使用的不是版本 6 react-router-dom，则应使用 Switch 而不是 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>
</>

但如果您使用的是版本 6，您的代码应该如下所示：

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