Question

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

之前，到达范围的路线如下：

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和/或Homepage，而不再显示/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路径来测试导航路径，就好像Route路径是正则表达式一样。由于您网站上的每个导航路径都包含根路径，因此path='/'将匹配所有可能的导航。由于根Route是列出的第一条路由，因此它是Switch将测试的第一条路由，并且由于该测试必然会导致匹配，因此Switch从不测试其他路由，因此它将只是渲染根组件。

将exact道具添加到路线上可以达到您的期望-除非Switch中的路径完全 Route检测到匹配。 >导航路径。因此，'/ root / other / folder'将在设置了exact道具的路线上不匹配'/'，因为'/'不完全相同到“ / root / other / folder”。

React Router不切换到非基本路由

2 个答案: