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

【问题标题】：React Router Cannot Get / depending on onEnter functionReact Router 无法获取 / 取决于 onEnter 函数
【发布时间】：2016-02-08 02:43:18
【问题描述】：

我是 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 路由工作正常。

【问题讨论】：

什么版本的 react-router？ 1.x?
我使用的是 react-router 的 1.0.0-beta3 版本。我确实尝试升级我正在使用的版本，但我最终以更简单的方式解决了它。

标签： javascript reactjs url-routing

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

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

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

您使用的是不同版本的 react-router 吗？我尝试查看备用版本文档中的 onEnter 钩子，该钩子将 transition 对象作为其第二个参数，但我没有找到任何运气。

【讨论】：

我使用的是 react-router 的 1.0.0-beta3 版本，它传递的是 Transition 对象而不是 replace 函数。我确实尝试升级我正在使用的版本，但我最终以更简单的方式解决了它。