Question

我有如下所示的路由，如果有人单击主页上的ADMIN按钮（此按钮路由到/ admin），我想将用户重定向到admin / users页面，但出现此错误：

您尝试重定向到当前所在的路线： / admin / users

<Switch location={this.props.location}>
     <Route path="/" exact component={Home} />
     <Route path="/orders" component={Orders} />
     <Route path="/account" component={Account} />

     <Route path="/admin/users" component={Users} />
     <Route path="/admin/auth" component={Auth} />

     <Redirect from="/admin" to="/admin/users" />

     <Redirect from="*" to="/" />
</Switch>

我将位置属性添加到了Switch中，因为我在路由时使用了动画。您可以在以下链接中找到示例：https://reacttraining.com/react-router/web/example/animated-transitions
如果我删除位置属性，一切都很好，但是使用此属性，我会出错。
我搜索了很多网站，并尝试了几项操作，但未能实现。我需要位置属性，无法删除。

如果您有帮助，我将不胜感激。

谢谢

Answer 1

不是解决方案，但会消除错误。

<Switch location={this.props.location}>
 <Route path="/" exact component={Home} />
 <Route path="/orders" component={Orders} />
 <Route path="/account" component={Account} />

 <Route path="/admin/users" component={Users} />
 <Route path="/admin/auth" component={Auth} />

 {allowedToRedirect
  ?(
    <Redirect from="/admin" to="/admin/users" />

    <Redirect from="*" to="/" />
   )
  : null}
</Switch>

const allowedToRedirect = location.pathname === window.location.pathname; https://codesandbox.io/s/pjk4ykr4kq

Answer 2

我只有编写以下代码才能实现：

<Route exact strict path="/admin" render={({location}) => {
    if (location.pathname === window.location.pathname) {
         return <Redirect to="/admin/users" />;
    }
    return null;
}} />

但是Switch为什么不阻止一次又一次运行下面的重定向路由？因为当重定向发生时， / admin / users 路由也可以，但是 / admin 路由也可以。为什么Switch无法阻止？有人对此有答案吗？

反应路由器给出“重定向到同一路由”错误

2 个答案: