React Router无法获取/取决于onEnter功能

Question

我是React的新手,希望有人可以了解为什么会这样,以及如何调试它.

我定义了以下路线:

export default (withHistory, onUpdate) => {
  const history = withHistory?
              (Modernizr.history ?
                new BrowserHistory
              : new HashHistory)
            : null;
  return (
    <Router history={history}>
      <Route path='/login' component={Login} />
      <Route path='/' component={Home} onEnter={requireAuth} />
    </Router>
  );
};

requireAuth 应检查用户是否已登录,如果不是,则将其重定向到登录页面:

function requireAuth(nextState, transition) {
  transition.to("/login");
}

如果我将transtion.to呼叫留在并浏览到根URL,我只会在调试器中看到一条消息,显示"无法获取/"并且没有错误消息.在该行上设置断点似乎没有做任何事情.

特别奇怪的是,如果我transition.to(...)用debugger;语句替换,那么调用该方法并且路由工作完全正常.

我必须对某些事情有误解,对这是什么一无所知？

编辑:我应该添加导航host:port/login工作正常,所以我知道login路线工作.

Answer 1

来自 Angular 背景的我错误地认为路由完全发生在客户端。可以使用react-router 进行客户端和服务器端路由。

该transition.to调用在客户端运行良好，但在服务器端路由启动并返回页面时引发异常Cannot GET /。异常被捕获但没有记录任何内容。

我添加了一个 if 语句来查看我们是否在客户端上运行：

if(window.location) {
    if(!loggedIn) {
        transition.to("/login");
    }
 }

可能有更好的方法来处理这个问题，如果我最终弄清楚我会更新我的答案。