如何在React Router V4中通过按钮单击在路径上导航? [英] How to navigate on path by button click in react router v4?

问题描述

我在react-router-dom中有以下路径:

I have this paths in react-router-dom:

 <BrowserRouter>
  <div>
  <Route exact path='/(index.html)?' component={Home}/> {/* app = home */}
  <Route  path='/register' component={Registration}/>
  </div>
</BrowserRouter>

一切正常，现在我组件中的任何地方，我都想通过onClick更改路径，像这样的代码:

everything is working fine, now anywhere in my components I want to change path by onClick, a code like this:

<button onClick={() => history.push('/the/path') }> change path </button>

我该怎么做?

推荐答案

import {withRouter} from 'react-router-dom';
...

class App extends React.Component {
  ...

  nextPath(path) {
    this.props.history.push(path);
  }

  render() {
    return (
      <button onClick={() => this.nextPath('/the/path') }>
        change path 
      </button>
    );
  }
}

export default withRouter(App);

这篇关于如何在React Router V4中通过按钮单击在路径上导航?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！