如何以编程方式从React Router 4.0中的事件处理程序导航到路由？

Question

事件成功后我需要导航到路线.自从以前的版本以来,这似乎已经改变了 以前我们会这样做:

import { browserHistory } from 'react-router';
...
handleClick(){
  doSomething();
  browserHistory.push('/some/path');
}

Answer 1

此示例适用于react-router和react-router-dom v4.0.0.

我们有3个组成部分:

• App.js - 包含组件1和组件2
• Component1.js - 没有包含在Route中并且将始终被渲染,但是这将没有"路径道具"的引用 - (历史,位置,匹配......)
• Component2.js - 仅在路由位置匹配时呈现.需要注意的是,此组件将使用"路径道具"进行渲染

要以编程方式导航,您可以使用react-router 历史记录对象.

this.props.history.push('path');

对于通过Route呈现的组件,这将立即起作用,因为这些组件已经可以访问路径道具(历史).在我们的示例中,这是Component2.但是,对于未通过Route呈现的组件(例如Component1),您需要将其包装在withRouter中以允许您访问历史对象.

App.js

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';

import Component1 from './Component1';
import Component2 from './Component2';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Component1 />
          <Route path="/render1" render={() => <div>Rendered from Component1</div>} />
          <Route path="/" component={Component2} />
          <Route path="/render2" render={() => <div>Rendered from Component2</div>} />
        </div>
      </BrowserRouter>
    )
  }
}

export default App;

Component1.js

import React from 'react';
import { withRouter } from 'react-router';

class Component1 extends React.Component {

  handleButtonClick() {
    this.props.history.push('/render1');
  }

  render() {
    return (
      <div>
        <h1>Component 1</h1>
        <button onClick={this.handleButtonClick.bind(this)}>Component 1 Button</button>
      </div>
    );
  }
}

const Component1WithRouter = withRouter(Component1);
export default Component1WithRouter;

对于Component1,我们将它包装在withRouter中,然后导出返回的包装对象.有些人注意到,在App.js中,我们仍然将其引用为Component1而不是Component1WithRouter

Component2.js

import React from 'react';

class Component2 extends React.Component {

  handleButtonClick() {
    this.props.history.push('/render2');
  }

  render() {
    return (
      <div>
        <h1>Component 2</h1>
        <button onClick={this.handleButtonClick.bind(this)}>Component 2 Button</button>
      </div>
    );
  }
}

export default Component2;

对于Component2,历史对象已经可以从this.props获得.你只需要调用push函数.