反應路由器。組件

中缺少路由器作爲上下文我使用react-router v4，我想以編程方式導航到其他網址（我經常需要在我的商店中）。在react-router v3中，它非常簡單：只需使用browserHistory.push（）即可。但是這一次很複雜。我無法使用任何反應組件中指出的here。所以，我嘗試從上下文獲取路由器。這裏是我的組件反應路由器。組件

'use strict'; 
import React, { Component } from 'react'; 
import { observer, Provider } from 'mobx-react'; 
import { BrowserRouter, Match, Miss, Link } from 'react-router'; 
import axios from 'axios'; 
import Main_Store from '../main.store'; 
import Signin from '../../auth/components/signin.component'; 
import Signup from '../../auth/components/signup.component'; 
import Header from './header/header.component'; 
import Zone from '../../zone/components/zone.component'; 

const main_store = new Main_Store(); 

@observer 
class Base extends Component { 
    render() { 
     const get_base = (props) => { 
     return (
      <Provider main_store={main_store} profile={main_store.profile}> 
       <div> 
        <Header main_store={main_store} /> 
        <main> 
        <Match pattern={'/*/zone-**'} component={Zone} /> 
        <Match pattern={'/*/signin'} component={Signin} /> 
        <Match pattern={'/*/signup'} component={Signup} /> 
        </main> 
       </div> 
      </Provider> 
     ) 
     }; 
     return (
     <BrowserRouter> 
      <Match pattern="/:view_type" render={(props) => get_base(props)} /> 
     </BrowserRouter> 
    ); 
    } 
    constructor(props) { 
     super(props); 
    } 
} 

Base.contextTypes = { 
    router: React.PropTypes.object 
}; 

export default Base;

和我區的組件，它也希望能夠訪問路由器

'use strict'; 
import React, { Component } from 'react'; 
import { observer } from 'mobx-react'; 
import { BrowserRouter, Match, Miss, Link } from 'react-router'; 

@observer(['main_store']) 
class Zone extends Component { 
    render() { 
     const { main_store } = this.props; 
     return (
     <div> 
      Zone component 
     </div> 
    ); 
    } 
    constructor(props) { 
     super(props); 
    } 
    componentDidMount() { 
     console.log('this Zone', this) 
    } 
} 

Zone.contextTypes = { 
    router: React.PropTypes.object, 
    history: React.PropTypes.object 
} 

export default Zone;

但並沒有什麼。路由器是未定義的。我做錯了什麼？任何其他想法如何以編程方式導出組件？

來源

2017-01-04 Pavel Poberezhnyi

您只能通過您的<BrowserRouter>組件的子女訪問context.router。由於<Base>是您的<BrowserRouter>的家長，因此您無法通過它訪問context.router。如果您將<BrowserRouter>向上移動（<Base>以外），您的代碼應該可以工作。

ReactDOM.render((
    <BrowserRouter> 
    <Base /> 
    </BrowserRouter> 
), holder)

來源

2017-01-04 16:22:04

謝謝！這是有效的。順便說一下，我有相同的上下文實現子組件（），但它不起作用。也許是因爲HOC包裝器注入道具。但我希望我可以嘗試將路由器注入應用商店，然後將其傳播到任何內部組件 –

我將不得不看到您的代碼「」組件可以肯定地說任何事情，但HOC不應該打破上下文。同樣，希望React Router v4會添加一個'withRouter' HOC，這將允許你只需要打包需要訪問''router'的組件，你就不必自己亂搞'context'。 –

感謝保羅的幫助。我在我的問題中添加了Zone組件的代碼。 –

反應路由器。組件

回答

相關問題