反应路由器不切换到非基本路线

Question

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

之前，路线看起来像这样：

import { Router } from '@reach/router';
...
<Router>
      {anon ? <AnonHomepage /> : <Homepage />}
      <Explore path="explore/:category" />
</Router>

然后，切换到React路由器，我的文件设置为这样：

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和/或主页，而不再显示/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

简短答案：您需要将布尔prop exact传递到您的根路线，就像这样：

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

说明：在此处查看<Switch>组件上的文档。Switch仅渲染第一路由其path Prop匹配当前位置。从本质上讲，当React路由器接收新的导航并寻找将其与之匹配的路由时，它会用Route路径测试导航路径，就好像Route路径是正则表达式一样。因为您网站上的每个导航路径都包含根路径，因此path='/'将匹配所有可能的导航。由于根Route是列出的第一个路由，因此它是第一个路由Switch将测试，并且由于该测试必定会导致匹配，因此Switch切勿测试其他路线，因此仅呈现root组件。

。

将exact Prop添加到路由上可以执行您的期望 - 它可以防止Switch检测匹配，除非Route中的路径正好是导航路径。因此，在设置exact Prop的路线上，'/root/ote/ote/folder'将 not match'/'，因为'/'不是完全等于'/root/其他/文件夹'。