Question

我使用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;

但没有什么。路由器未定义。我做错了什么？有关如何以编程方式导航组件的任何其他想法吗？

Answer 1

您只能通过context.router组件的子级访问<BrowserRouter>。由于<Base>是您<BrowserRouter>的父级，因此无法通过context.router访问<BrowserRouter>。如果您将<Base>向上移动一级（ReactDOM.render(( <BrowserRouter> <Base /> </BrowserRouter> ), holder)之外），则代码应该有效。

git revert

反应路由器。缺少路由器作为组件中的上下文

1 个答案: