在 onEnter 中使用 replaceState 时 this.props.location.state 为 null

Posted 2023-02-21

【中文标题】在 onEnter 中使用 replaceState 时 this.props.location.state 为 null

【英文标题】：this.props.location.state is null when using replaceState in onEnter

【发布时间】：2016-04-19 18:51:08

【问题描述】：

我一直在关注 react-router 1.0.3 的 auth-flow 示例：

var requireAuth = function(nextState, replaceState)
  if(!auth.loggedIn())
    replaceState( nextPathname: nextState.location.pathname , '/login');
  


export default (
  <Route component=App>
    <Route path='/login' component=Login/>
    <Route path='/' component=Messenger onEnter=requireAuth/>
  </Route>
);

当某人未登录时，函数 replaceState 会按预期执行，显示 /login 页面，但状态：

nextPathname: nextState.location.pathname

应该在 this.props.location.state 中找不到。相反 this.props.location.state 是未定义的。

这似乎与以下问题相同： https://github.com/rackt/react-router/issues/2768

有人知道为什么没有设置状态吗？

编辑 我尝试了 this.props.history.replaceState 并且似乎毫无问题地通过了状态。只有在 onEnter 钩子中才有效。

编辑 2 在对 react 进行了更多的实验和学习之后，我意识到我正在使用 react 进行服务器端渲染。 replaceState 函数将在服务器中触发，Router.match 函数（推荐用于服务器端渲染）将触发：

    Router.match( routes: routes.default, location: req.url , function(err, redirectLocation, renderProps) 
        if (err) 
          res.status(500).send(err.message)
         else if (redirectLocation) 
          res.status(302).redirect(redirectLocation.pathname + redirectLocation.search)
         else if (renderProps) 
          var html = ReactDOM.renderToString(React.createElement(Router.RoutingContext, renderProps));
          var page = swig.renderFile('views/index.html',  html: html );
          res.status(200).send(page);
         else 
      res.status(404).send('Page Not Found')
    
  );

redirectLocation 将设置为“/login”，并且 renderProps 将包含下一个状态。但显然在进行服务器端重定向时，nextState 不会传递：

res.status(302).redirect(redirectLocation.pathname + redirectLocation.search)

如果这是正确的，那么问题是如何在服务器端重定向时设置状态。

【参考方案1】：

在组件中。 pathName 在 this.props.location.pathname 中 我在那儿找到了。

_handleSubmit: function(e) 
    e.preventDefault();
    //console.log(this.props.location.state); // null ???
    //the above should be changed to 
    console.log(this.props.location.pathname);
    return false;

【讨论】：

感谢您的回答。我检查了一下，我得到了路径名“/ login”，而不是成功登录后我想要重定向到的 nextState 路径名。你得到不同的结果吗？