javascript - 注销后 React Router 4 管理路由

Question

我是 React 新手，我一直致力于使用 Meteor 实现基本身份验证过程，我正在使用 React Router V4 进行路由，下面是我的路由代码以获得基本概念:

const routes = (
  <Router history={history}>
    <Switch>
        <Route exact path="/" component={Login}  onEnter={onEnterPublicPage}/>
        <Route exact path='/signup' component={Signup} onEnter={onEnterPublicPage}/>
        <Route exact path='/links' component={Link}/>
          <Route exact path='*' component={NotFound}/>
    </Switch>
   </Router>
);  

这是我期望的基本身份验证流程:

Login Screen > Home Screen(press logout) > Login Screen

此流程是通过使用以下代码实现的:

Tracker.autorun(() => {
 const isAuthenticated= !!Meteor.userId();
 console.log('isAuthenticated', isAuthenticated);
   if (isAuthenticated && isUnAuthenticatedPage){
     history.push('/links');
   }
   else if (!isAuthenticated && isAuthenticatedPage){
     history.push('/');
   }
});

注销后通过此代码，当我登陆到 Root(即登录屏幕)时，通过按浏览器的后退按钮，我再次被重定向到主屏幕，这根据预期流程不应该发生。我该如何处理这种情况？

我试图在注销后清除浏览器历史记录，但我认为这不是实现此流程的最佳做法。任何帮助，将不胜感激。谢谢。

Answer 1

使用history.replace()代替history.push()

为什么？

当你调用 history.push 接口(interface)时，它会添加一个新的状态在历史栈的顶部(所以你可以通过点击浏览器的后退按钮回到以前的历史状态)，而 history.replace将用您定义的新历史状态替换当前历史状态。