2

我在以前使用 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 和/或 Homepage /,不再显示/explore(或任何其他)路由。我究竟做错了什么?我怎样才能让它使用正确的组件,而不是总是显示基本路由的组件?

4

2 回答 2

3

您可以在路线上使用exact道具

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>
于 2019-07-09T00:49:14.617 回答
2

简短的回答:您需要将布尔道具传递exact给您的根路由,如下所示:

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

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

exactprop 添加到路由中可以达到您的预期 - 它可以防止Switch检测到匹配,除非路径中的路径Route恰好导航路径。因此,'/root/other/folder'不会匹配exact设置了 prop 的路由上的 '/',因为 '/' 不完全等于 '/root/other/folder'。

于 2019-07-09T01:01:08.140 回答