在 React Router 中进行两次路由加载或挂载

Question

当应用程序启动时，路由被挂载/加载两次。

这是显示该问题的视频： https://imgur.com/1nwZS4O

这是我的代码：

 <Router history={props.history}>
      <Switch>
        <Route exact path="/" render={() => <Redirect to="/event/1234" />} />
        {/*Event */}
        <Route exact path="/event/:eventId" component={Event} />
        <Route exact path="/event/:eventId/friends" component={Friends} />
        <Route component={NotFound} />
      </Switch>
  </Router>

知道如何解决吗？ 请帮忙

沙盒： https://codesandbox.io/s/keen-silence-47ztr?file=/src/App.js:528-884

注意：您无法在移动设备上重现该问题。

Answer 1

好吧，您正在代码中进行重定向

  if (!!matches) {
const defaultPathname = `/event/${matches[1]}`;
props.history.replace(defaultPathname); // redirect here

}

在您的视频中，您正在调用https://47ztr.csb.app/event/1234/friends重定向到https://47ztr.csb.app/event/1234/