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