React-router-dom - 警告：您试图重定向到您当前所在的相同路线

Question

我正在使用动画路线转换构建反应应用。一切似乎都有效，但控制台不断显示标题警告。 下面是我的路线渲染功能：

render() {
  return (
    <main>
      <ReactCSSTransitionGroup
        transitionName="app"
        transitionEnterTimeout={600}
        transitionLeaveTimeout={600}
      >
        <Switch key={location.pathname} location={location}>
          <Route path="/route1" component={Route1} />
          <Route path="/route2" component={Route2} />
          <Route path="/route3" component={Route3} />
          <Redirect to="/route1" />
        </Switch>
      </ReactCSSTransitionGroup>
    </main>
  );
}

我有3条路线，其他一切都应该重定向到/ route1。如果我在url栏中手动输入/ route4，则会出现警告。

如果我删除了ReactCSSTransitionGroup，警告就会消失。

render() {
  return (
    <main>
      <Switch key={location.pathname} location={location}>
        <Route path="/route1" component={Route1} />
        <Route path="/route2" component={Route2} />
        <Route path="/route3" component={Route3} />
        <Redirect to="/route1" />
      </Switch>
    </main>
  );
}

由于应用程序有效，它并不是什么大不了的事。但我更喜欢在我的应用程序中没有警告，我想保留过渡。

Answer 1

没有path道具的路线将始终呈现。

因此，如果您想将Route1指定为包罗万象的组件，只需删除它的path属性即可。

当然Switch将显示匹配的第一条路线，因此，包罗万象的内容必须是最后一条路线。

<Switch key={location.pathname} location={location}>
    <Route path="/route2" component={Route2} />
    <Route path="/route3" component={Route3} />
    <Route component={Route1} />
</Switch>

Answer 2

尝试将catch放在<Redirect />上方。

<Route />