React Router 不切换到非基本路由

Question

我在之前使用 Reach Router 的项目中设置 React Router。

之前，Reach 的路线如下所示：

import { Router } from '@reach/router';

...

<Router>
      {anon ? <AnonHomepage /> : <Homepage />}
      <Explore path="explore/:category" />
</Router>

然后，切换到 React Router，我的文件设置如下：

import { BrowserRouter, Switch, Route } from 'react-router-dom';

...

<BrowserRouter>
      <Switch>
        {anon ? (
          <Route path="/" component={AnonHomepage} />
        ) : (
          <Route path="/" component={Homepage} />
        )}
        <Route
          path="/explore/:category"
          component={Explore}
        />
      </Switch>
</BrowserRouter>

但是，路由器只显示 AnonHomepage and/or / 路由中的主页，不再显示 /explore（或任何其他）路由。我究竟做错了什么？我怎样才能让它使用正确的组件而不是总是显示基本路由的组件？

Answer 1

您可以在路线

上使用exact prop

import { BrowserRouter, Switch, Route } from 'react-router-dom';

...

<BrowserRouter>
      <Switch>
        {anon ? (
          <Route exact path="/" component={AnonHomepage} />
        ) : (
          <Route exact path="/" component={Homepage} />
        )}
        <Route
          path="/explore/:category"
          component={Explore}
        />
      </Switch>
</BrowserRouter>

Answer 2

简答：您需要将布尔属性 exact 传递给您的根路由，如下所示：

<Switch>
  <Route exact path='/' component={YourComponent} />
  <Route path='path/to/other/component' component={OtherComponent) />
</Switch>

说明：查看有关 <Switch> 组件 here 的文档。 Switch 仅呈现其 path 属性与当前位置匹配的 first 路由。本质上，当 React Router 接收到新导航并寻找与其匹配的路由时，它会使用 Route 路径测试导航路径，就好像 Route 路径是正则表达式一样。因为您网站上的每个导航路径都包含根路径，所以 path='/' 将匹配所有可能的导航。由于根 Route 是列出的第一条路由，因此它是第一条路由 Switch 将测试的，并且由于该测试必然会导致匹配，因此 Switch 永远不会测试其他路由，它只渲染根组件。

将 exact 属性添加到路由中可以达到您的预期——它会阻止 Switch 检测到匹配项，除非 Route 中的路径是正是导航路径。所以'/root/other/folder'将不匹配设置了exact属性的路线上的'/'，因为'/'不完全等于'/root/other/folder'。

React Router 不切换到非基本路由

React Router not switching to non-base routes

reactjs

react-router

reach-router