路由不会在 React 中渲染组件

Question

我正在尝试使用 React 制作一个简单的导航栏，它将在页面中导航。

我正在使用 Router，您可以看到链接更改了页面，但没有呈现组件。我使用了这个导入：

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

将我的导航包裹在一个标签中，包括指向路线的链接，然后使用该标签包裹所有路线。

<Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
          <Route path="/classes" element={<Classes />} />
        </Routes>

整个代码：

import "./App.css";
import Pdf from "./components/Pdf.js";
import data from "./data.js";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Home from "./Pages/Home.js";
import Profile from "./Pages/Profile.js";
import Classes from "./Pages/Classes.js";

function App() {
  return (
    <div className="App">
      <Router>
        <nav class="navbar  fixed-top navbar-expand-sm navbar-dark bg-dark">
          <div class="container">
            <a href="#" class="navbar-brand mb-0 h1">
              App
            </a>
            <button
              class="navbar-toggler"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarNav"
              aria-controls="navbarNav"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              Menu
            </button>
            <div
              class="collapse navbar-collapse justify-content-center customnav"
              id="navbarNav"
            >
              <ul class="navbar-nav ">
                <li class="nav-item active">
                  <Link class="nav-link active" to="/">Αρχική</Link>
                </li>
                <li class="nav-item active">
                  <Link class="nav-link active" to="/profile">Προφίλ</Link>
                </li>
                <li class="nav-item active">
                  <Link class="nav-link active" to="/classes">Classes</Link>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
          <Route path="/classes" element={<Classes />} />
        </Routes>
      </Router>
      
    </div>
  );
}

export default App;

有没有重叠的地方？

这是我的 index.js 代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

Answer 1

尝试在路由组件中添加属性 exact，例如：

<Route path="/" exact element={<Home />} />
<Route path="/profile" element={<Profile />} />
<Route path="/classes" element={<Classes />} />

发生这种情况是因为当您仅提供 path 属性时，应用程序将呈现至少具有部分路由的第一个组件，而不是匹配整个路由的组件。

查看更多：https://v5.reactrouter.com/web/api/NavLink/exact-bool

路由不会在 React 中渲染组件

Route won't render component in React

reactjs