Reactjs路由器onEnter钩子认证导致无限循环

Question

我正在尝试重定向仪表板页面上的登录用户。

这是我的代码：

function requireAuth(nextState, replace) {
  if(isLoggedIn()) {
    console.log("user is logged in");
    replace('/dashboard');
  } else {
    replace('/');
  } 
}

const Root = () => {
  return (
    <div className="container">
      <Router history={browserHistory}>
        <Route path="/" component={App}>
          <Route onEnter={requireAuth}>
            <Route path="dashboard" component={AllEvents}/>
          </Route>
        </Route>
      </Router>
    </div>
  )
}

当用户登录时，我的应用程序正在运行一个带有requireAuth方法的循环。

我已经在StackOverflow上考虑过两个类似的问题，它们是:

react超出最大调用堆栈大小

React-router，onEnter导致身份验证无限循环

我两种都试过，但不幸的是，那些例子对我没有帮助。（我也是React的初学者）

请告诉我我的代码有什么问题？

Answer 1

您会得到一个无限循环，因为如果用户登录，它总是将他重定向到< code>/dashboard，并从< code>/开始重复重定向过程，再次点击< code>requireAuth。

尝试：

function onlyUnAuthenticated(nextState, replace, callback) {
  if(isLoggedIn()) {
    replace('/dashboard');
  }
  callback();
}

function onlyAuthenticated(nextState, replace, callback) {
  if(!isLoggedIn()) {
    replace('/');
  } 
  callback();
}

const Root = () => {
  return (
    <div className="container">
      <Router history={browserHistory}>
        <Route path="/" component={App} onEnter={onlyUnAuthenticated}>
          <Route path="dashboard" component={AllEvents} onEnter={onlyAuthenticated}/>
        </Route>
      </Router>
    </div>
  )
}

我认为你将不得不在钩子中使用回调。