我的 React 路由器不适用于所有路由

Question

我是React的新手。我对下面的代码有问题，因为只显示Dashboard和Register路由。登录显示空白页面。我试过创建其他路线，但它们也不起作用。只有专门称为Dashboard和Register的路由才能工作。有人知道问题出在哪里吗？提前感谢！

App.js

import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
import Dashboard from './pages/Dashboard.jsx'
import Login from './pages/Login.jsx'
import Register from './pages/Register.jsx'

function App() {
return (
<>
<Router>
<div className="container">
<Routes>
<Route path='/' element={<Dashboard />}/>
<Route path='/register' element={<Register />}/>
<Route path='/login' element={<Login />}/>
</Routes>
</div>
</Router>
</>
);
}
export default App;

pages/Dashboard.jsx

import React from 'react'
function Dashboard() {
return (
<div>Dashboard</div>
)
}
export default Dashboard

页面/注册.jsx

import React from 'react'
function Register() {
return (
<div>Register</div>
)
}
export default Register

pages/Login.jsx

import React from 'react'
function Login() {
return (
<div>Login</div>
)
}
export default Login

Answer 1

在路径前面添加精确值，检查https://v5.reactrouter.com/web/guides/quick-start更多信息

function App() {
return (
<>
<Router>
<div className="container">
<Routes>
<Route exact path='/' component={<Dashboard />}/>
<Route exact path='/register' component={<Register />}/>
<Route exact path='/login' component={<Login />}/>
</Routes>
</div>
</Router>
</>
);
}
export default App;

Answer 2

尝试逐个元素替换组件。像这样，

<Routes>
<Route
path="/"
element={<ListEmployeeComponent></ListEmployeeComponent>}
/>
<Route
exact
path="/employees"
element={<ListEmployeeComponent />}
/>
</Routes>