Reactjs React router dom-警告：您试图重定向到与您'；我们现在在

我正在构建一个带有动画路线转换的react应用程序。一切似乎都正常，但控制台不断显示标题中的警告。 下面是我的管线渲染功能：

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

render（）{
返回(
);
}

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

如果我删除ReactCSTranssitionGroup，警告将消失

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

render（）{
返回(
);
}

既然这个应用程序可以运行，那就没什么大不了的了。但我不希望在我的应用程序中出现警告，我希望保持转换。

尝试将

放在

上方

render（）{
返回(
);
}

没有路径的路线将始终呈现。 因此，如果您想将

Route1

指定为一个包罗万象的组件，只需删除它的

path

prop即可

当然，

开关

将显示与匹配的第一条路线，因此“全部捕获”必须是最后一条路线

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

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