为什么我的 React 组件在所有路由中都呈现？

Question

这是 App.js 中的我的 App() function，comps： “Sidebar, Feed and Widgets”保持在route ="/"和="/login"中呈现，除了“Login”comp 没有'甚至没有在 route ="/login"中渲染。

<Router>
      <div className="app">
        <Switch>
          <Route path="/">
            <Sidebar />
            <Feed />
            <Widgets />
          </Route>

          <Route path="/login">
            <Login />
          </Route>
        </Switch>
      </div>
    </Router>

Answer 1

如果您使用的是最新版本的react-router-dom ，则必须将Switch更改为Routes

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import { Sidebar, Feed, Widgets } from '...'

const Home = () => {
  return (
    <Sidebar />
    <Feed />
    <Widgets />
  )
}

const App = () => {
  return (
    <Router>
      <div className="app">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
        </Routes>
      </div>
    </Router>
  )
}

Answer 2

Switch组件专门匹配和渲染路由，因此只能匹配 1 个路由。 但是，您的路线顺序存在问题，因此只有"/"路径匹配，因为它更早并且被渲染。 "/login"的路径永远无法按原样到达。

换句话说，这意味着当路径是"/login"时， "/"仍然匹配它并且是渲染的路由。 在react-router-dom v5 中，将path道具视为“路径前缀”。

在Switch组件中，路径顺序和特异性很重要。 您应该将路径从更具体到不太具体。 这允许在尝试不太具体的路径之前匹配更具体的路径，如"/login" 。

<Router>
  <div className="app">
    <Switch>
      <Route path="/login">
        <Login />
      </Route>
      <Route path="/">
        <Sidebar />
        <Feed />
        <Widgets />
      </Route>
    </Switch>
  </div>
</Router>

Answer 3

是的，如果你有资源，我建议升级到 v6！ 新的<Routes>而不是<Switch>有更好的路由匹配，所以你不会遇到这个问题

Answer 4

您需要添加精确的“/'”路线。

在您没有添加精确的情况下，React 路由器会将“/login”路径与第一个路径“/”匹配，并将相应地呈现而不检查下一个路由。 通过添加精确，第一个'/'将不匹配，它将与第二个路由'/login'匹配。

      <Router>
          <div className="app">
            <Switch>
              <Route path="/" exact>
                <Sidebar />
                <Feed />
                <Widgets />
              </Route>
    
              <Route path="/login">
                <Login />
              </Route>
            </Switch>
          </div>
        </Router>

有关更多信息，您还可以参考这个类似的问题： React: difference between <Route exact path="/" /> and <Route path="/" />