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");
    }
 }

可能有一种更好的方法可以解决这个问题，如果我最终解决这个问题，我会更新我的答案。

Answer 2

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

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

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

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

2 个答案: