Маршрут загрузки или монтажа дважды в 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/