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，我只会看到一条消息 "Cannot Get /"，调试器中没有错误消息。在该行上放置一个断点似乎没有做任何事情。

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

我一定是对某事有误解，有什么想法吗？

编辑：我应该补充一点，导航到 host:port/login 工作正常，所以我知道 login 路线工作。

Answer 1

根据当前文档，onEnter 挂钩接收一个 replace 函数作为其第二个参数。即

type EnterHook = (nextState: RouterState, replace: RedirectFunction, callback?: Function) => any;

您使用的是不同版本的 react-router 吗？我尝试通过替代版本文档查找一个 onEnter 钩子，该钩子将 transition 对象作为其第二个参数，但我没有找到任何东西。

Answer 2

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

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

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

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

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

React Router 无法获取/取决于 onEnter 函数

React Router Cannot Get / depending on onEnter function

javascript

url-routing

reactjs