react.js—Route 不会在 React 中渲染组件
我正在尝试使用 React 制作一个简单的导航栏，该导航栏将在页面中导航。
我正在使用路由器，您可以看到链接更改了页面，但没有呈现组件。我使用了这个导入：
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();
