React-不能使用 context.router 来重定向页面

Posted 2023-02-22

【中文标题】React-不能使用 context.router 来重定向页面

【英文标题】：React-Cannot use context.router to redirect page

【发布时间】：2016-09-08 05:22:57

【问题描述】：

我想构建一个我的 react/react-router/flux 应用程序。 当用户输入秘密链接（如管理页面）时，我想将用户重定向到登录页面

这里是管理组件：

class App extends React.Component 
render() 
if (!adminLogin)
this.context.router.transitionTo('/login');

return (    
  <div className="wrapper">
        <Navbar />
        <SidebarLeft />
            <div className="content-wrapper">
            this.props.children
             </div>
        <Footer />
  </div>
 );
 App.contextTypes = 
    router: React.PropTypes.func
 ;
 export default App;

但是，我对反应上下文有疑问

TypeError: Cannot read property 'transitionTo' of undefined
at App.render (App.js:8:5)
at [objectObject].ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (D:\web\MVCmodel\library\lib\node_modules\react\lib\ReactCompositeComponent.js:587:34)
at [object Object].ReactCompositeComponentMixin._renderValidatedComponent (D:\web\MVCmodel\library\lib\node_modules\react\lib\ReactCompositeComponent.js:607:32)
at [object Object].wrapper [as _renderValidatedComponent] (D:\web\MVCmodel\library\lib\node_modules\react\lib\ReactPerf.js:66:21)
at [object Object].ReactCompositeComponentMixin.mountComponent (D:\web\MVCmodel\library\lib\node_modules\react\lib\ReactCompositeComponent.js:220:30)
at [object Object].wrapper [as mountComponent] (D:\web\MVCmodel\library\lib\node_modules\react\lib\ReactPerf.js:66:21)
at Object.ReactReconciler.mountComponent (D:\web\MVCmodel\library\lib\node_modules\react\lib\ReactReconciler.js:37:35)
at [object Object].ReactCompositeComponentMixin.mountComponent (D:\web\MVCmodel\library\lib\node_modules\react\lib\ReactCompositeComponent.js:225:34)
at [object Object].wrapper [as mountComponent] (D:\web\MVCmodel\library\lib\node_modules\react\lib\ReactPerf.js:66:21)
at D:\web\MVCmodel\library\lib\node_modules\react\lib\ReactServerRendering.js:42:38
at ReactServerRenderingTransaction.Mixin.perform (D:\web\MVCmodel\library\lib\node_modules\react\lib\Transaction.js:136:20)
at Object.renderToString (D:\web\MVCmodel\library\lib\node_modules\react\lib\ReactServerRendering.js:40:24)
at D:\web\MVCmodel\library\lib\server.js:326:27
at D:\web\MVCmodel\library\lib\node_modules\react-router\lib\match.js:58:5
at D:\web\MVCmodel\library\lib\node_modules\react-router\lib\useRoutes.js:120:15
at done (D:\web\MVCmodel\library\lib\node_modules\react-router\lib\AsyncUtils.js:49:19)

我对这个问题没有任何想法，也不知道如何解决。请帮帮我？

【参考方案1】：

您似乎在 react-router 中使用了 browserHistory（pushState API）。我会使用它的推送功能，让路由器过渡到你的组件：

var Router = require('react-router');
Router.browserHistory.push('/login');

或在 ES6 语法中：

import browserHistory from ('react-router');
browserHistory.push('/login');

因此，考虑到这一点，您的完整代码应该更像这样：

import React, PropTypes, Component from 'react';
import browserHistory from 'react-router';

class App extends Component 

  render() 
    if (!adminLogin) 
      browserHistory.push('/login');
    
    return (
      <div className="wrapper">
        <Navbar />
        <SidebarLeft />
        <div className="content-wrapper">
          this.props.children
        </div>
        <Footer />
      </div>
    );
  


export default App;

【参考方案2】：

路由器不是一个函数，它是一个对象。

这个

 App.contextTypes = 
    router: React.PropTypes.func
 ;

应该是

 App.contextTypes = 
    router: React.PropTypes.object
 ;

正如您在React-Router documentation 中看到的那样

-- 已编辑--

您也可以使用历史记录而不是路由器来实现。

App.contextTypes = 
        history: React.PropTypes.object
     ;

并像这样使用它

this.context.history.pushState(null, '/login');

【讨论】：

我改变了它。但它没有工作，并用同样的信息发出警报！ :(

尝试添加一个构造函数并检查第二个参数，即上下文是否有路由器属性

我尝试添加constructor(props) super(props);，但结果相似。我不知道为什么

我也尝试在 render() 中添加console.log(this.context.router);。但结果是undefine。

你的 react 路由器版本是什么？