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

Question

这是我在 App.js 中的 App() 函数，comps :"Sidebar, Feed and Widgets" 在 route ="/" 中继续呈现，并且="/login" 同样，除了“登录”组件甚至没有在路由 ="/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

您需要添加 exact with "/'" 路由。

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

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

更多信息，您也可以参考这个类似的问题：

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

Why are my React components rendering in all routes?

javascript

reactjs

react-router-dom