How to navigate on path by button click in react router v4?

Question

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> 

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> 

how can I do that?

Answer 1

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

Answer 2

If you're using the button only for navigation, you can replace it with <Link />¹ and apply a button style.

<Link to='/new/location/'>Click Me</Link> 

Or you can use the <NavLink />².

In case of using Material UI, you can use the following code:

import { Link } from 'react-router-dom' import Button from '@material-ui/core/Button';  <Button component={Link} to="/new/location/">   Click Me </Button> 

---

(1): import {Link} from "react-router-dom";
(2): import {NavLink} from "react-router-dom";