如何避免重定向两次（react-router-redux）？

Posted 2023-02-22

【中文标题】如何避免重定向两次（react-router-redux）？

【英文标题】：How to avoid redirecting twice (react-router-redux)?

【发布时间】：2018-01-05 22:44:50

【问题描述】：

我正在使用与 react-router 4.x 兼容的the next (5.0.0) version react-router-redux。

我的应用有两个页面/login 和/home。

如果用户访问不存在的页面，我正在尝试将页面重定向到 /login。这是我的代码

import  Route, Redirect  from 'react-router-dom';
import  ConnectedRouter, routerMiddleware, push  from 'react-router-redux';

ReactDOM.render(
  <Provider store=store>
    <ConnectedRouter history=history>
      <div>
        <Route path="/login" render=() => (
          isSignedIn ? <Redirect to="/home" /> : <Login />
        )/>

        <Route path="/home" component=Home />

        <Redirect to="/login" />
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

如果我删除<Redirect to="/login" />，如果用户已经登录，当他打开页面/home时，应用程序会直接进入主页，这很好。

但是，使用<Redirect to="/login" />，当用户打开页面/home时，应用程序将首先重定向到/login，然后返回到/home。

如何避免这种重定向两次？谢谢

【问题讨论】：

为什么不为 Home 配置路由，然后重定向到登录是用户没有从 Home 组件中登录

嗨@ShubhamKhatri，我没听明白，你能解释一下吗？谢谢

查看此问题以检查主页***.com/questions/44127739/… 中的登录并重定向我的意思是您可以拥有类似<Route path="/home" component=Home/> 的路线

对不起，我的错，其实已经是这样了，我刚刚更新了。但还是不行。

【参考方案1】：

利用Switch 来渲染第一个匹配的路由，而不是别的

import Switch from 'react-router';

ReactDOM.render(
  <Provider store=store>
    <ConnectedRouter history=history>
      <Switch>
        <Route path="/login" render=() => (
          isSignedIn ? <Redirect to="/home" /> : <Login />
        )/>

        <Route path="/home" component=Home />

        <Redirect to="/login" />
      </Switch>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

在您的情况下发生的情况是，即使 /home 匹配，Redirect 也会被执行。

【讨论】：

正如我在评论中所说，您可以将重定向到登录的逻辑保留在 Home 组件中。参考***.com/questions/44127739/…