react-router的一个问题

Question

把路由器封装为一个组件在用户登录的时候写一个登录状态到本地 如果是true正常返回一个route如果是false的话跳转到登录页.为的是 避免用户在没有登录的情况下直接跳转到内页去

---

需求描述清楚

步骤1.组件封装

const AuthRoute = (props) => {
    const isLogin = sessionStorage.getItem('isLogin') === 'true';
    if(isLogin){
      return <Route {...props} />
    }else{
      return <Redirect to={
        {
          pathname: '/login',
          state: {
            from: props.location,
          }
        }
      } />
    } 
  };

步骤2.组件调用

 <AuthRoute exact path='/' component={Home} />
 <AuthRoute path='/System'component={System} />

问题：
会报错
Warning: You tried to redirect to the same route you're currently on: "/login"

路由器为BrowserRouter 请问在不用Switch的情况下我这个组件怎么改才会把这个警告去掉

Answer 1

翻译一下报错内容，你大概就知道解决方案啦。如果当前路由就是等同于你将要跳转的路由时候，你应该拦截掉或者刷新，不要继续跳转，获取到你将要跳转的路由地址的方法就是在props里面，你多console几遍就知道了。