Question

我正在探索Routes动画，并且基本示例可以完美运行。但是，如果在动画的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>

我希望页面重定向的动画不会崩溃。

Answer 1

U无法使用重定向链接在已重定向的组件内进行重定向。而是使用以下内容：

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>
    );
  }

}

重定向时对路由器进行动画过渡

1 个答案: