Блог

Я изучаю анимацию маршрутов, и базовый пример работает отлично. Но в случае использования перенаправления внутри компонента animated Route происходит сбой при бесконечном цикле рендеринга.

Демонстрация: https://codesandbox.io/embed/v3j736jvwl

Воспроизвести: Нажать ссылку перенаправления

Это работает без анимации, если я удаляю реквизиты местоположения в компоненте Switch:

   <Switch>
    <Route exact path="/redirect" component={RedirectToMain} />
    <Route exact path="/hsl/:h/:s/:l" component={HSL} />
    <Route exact path="/rgb/:r/:g/:b" component={RGB} />
    <Route render={() => <div>Not Found</div>} />
  </Switch>
  

Я ожидаю анимацию перенаправления страницы без сбоев.

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

https://codesandbox.io/embed/v3j736jvwl

 class RedirectToMain extends React.Component {
  componentDidMount() {
    this.props.history.push('/');
  }

  render () {
    return (
      <div
        style={{
          ...styles.fill,
          ...styles.hsl,
          background: `red`
        }}
      >
      </div>
    );
  }

}