React-router-dom: ссылка вызывает изменение URL-адреса, но не новый загружаемый компонент

Question

Я изо всех сил пытаюсь создать вложенный маршрут с помощью React Router. Я создал небольшой пример того, что здесь не работает:

https://codesandbox.io/s/silly-dubinsky-of2mu

В основном у меня есть два маршрута с под-маршрутом каждый: first/first и second/first. В компоненте FirstFirst есть ссылка на второй маршрут:

 <Link to="/second/first">go to second first</Link>

Проблема заключается в том, что при нажатии на эту ссылку URL-адрес изменяется, но соответствующий компонент не загружается. Я могу видеть это только после обновления.

Как я могу это исправить?

Answer 1

Вам нужен только один компонент Маршрутизатор в вашем приложении

Вероятно, вы также имели бесконечные перенаправления из-за перенаправления, применяемого при каждом рендеринге.

Я удалил дополнительные компоненты Маршрутизатора, а затем упаковал ваш Первый и Второй компоненты с компонентом Switch, так что будет соответствовать только одна его часть. Маршрут попытается сопоставить, и в случае неудачи произойдет перенаправление.

https://codesandbox.io/s/trusting-wood-nbsg2?file= / src / Second. js

export default function Second() {
  return (
    <div>
      <Switch>
        <Route path="/second/first" component={SecondFirst} />
        <Redirect
          to={{
            pathname: "/second/first"
          }}
        />
      </Switch>
    </div>
  );
}

Answer 2

Я перешел по ссылке, которой вы поделились, но в браузере ничего не отображалось. В любом случае, я предполагаю, что вы запускаете это приложение на своем локальном компьютере и используете localhost: 3000 или 127.0.0.1:3000 или любой другой порт.

Если вы настроили ваше приложение на localhost, убедитесь, что вы используете localhost в браузере для просмотра вашего приложения. Если вы используете 127.0.0.1 в качестве конфигурации, вы должны использовать этот URL в браузере. Я знаю, что они оба являются местным хозяином и так далее. Но каким-то образом это может вызвать проблему, особенно с серверными приложениями.