반응 라우터. 구성 요소의 컨텍스트로 라우터가 누락되었습니다.

Question

저는 react-router v4를 사용하며 프로그래밍 방식으로 다른 URL로 이동하려고합니다 (종종 내 매장에서 이것을 필요로 함). 반응 라우터 v3에서는 매우 쉬웠습니다. 단지 browserHistory.push() 만 사용하면됩니다. 그러나 이번에는 복잡합니다. 나는 어떤 반응 성분에서든지 지적 된 here으로 사용할 수 없다. 그래서, 나는 맥락에서 라우터를 얻으려고 노력한다. 여기에 또한 라우터

'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; 

에 대한 액세스 권한을 갖고 싶어하지만, 아무것도 내 구성 요소

'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; 

내 영역 구성 요소입니다. 라우터가 정의되지 않았습니다. 내가 뭘 잘못 했니? 프로그래밍 방식으로 구성 요소를 탐색하는 다른 방법

Answer 1

<BrowserRouter> 구성 요소의 하위 항목을 통해서만 context.router에 액세스 할 수 있습니다. <Base>은 (는) <BrowserRouter>의 부모이므로 context.router에 액세스 할 수 없습니다. <BrowserRouter>을 레벨 (<Base> 외부)로 이동하면 코드가 작동합니다.

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