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

【问题标题】：Why are my React components rendering in all routes?为什么我的 React 组件在所有路由中都呈现？
【发布时间】：2022-01-12 10:27:11
【问题描述】：

这是 App.js 中的 my 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>

【问题讨论】：

需要添加exact属性，否则匹配路径的开头。

标签： javascript reactjs react-router-dom

【解决方案1】：

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

在您没有添加确切的情况下，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="/" />

【讨论】：

是啊啊啊啊！男人这拯救了我的一天，为我工作?

【解决方案2】：

如果您使用的是最新版本的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>
  )
}

【讨论】：

【解决方案3】：

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>

【讨论】：