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

【问题标题】：My React Router doesn't work for all routes我的 React 路由器不适用于所有路由
【发布时间】：2022-06-15 04:25:20
【问题描述】：

我是 React 新手。我在下面的代码中遇到问题，因为只显示仪表板和注册路线。登录显示空白页面。我尝试过创建其他路线，但它们也不起作用。只有专门称为 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

pages/Register.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

【问题讨论】：

当您将“/login”的路由更改为其他有效的路由时会发生什么？并将有效的更改为“/ login”
@MatheusRibeiro 感谢您的回复。文字只是消失并重新出现。没什么异常。这太奇怪了。
结束您的应用程序并重新启动它
尝试使用您的代码设置应用程序，它按预期工作。 codesandbox.io/s/hopeful-brattain-htj4px?file=/src/App.js
你也可以添加exact，让它只渲染一个组件

标签： reactjs routes

【解决方案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;

【讨论】：

【解决方案2】：

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

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

【讨论】：