score:57

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

score:12

in react-router-dom version 6 use useNavigate

import { useNavigate } from "react-router-dom";
import { Button } from "@mui/material";
...
const navigate = useNavigate();
<Button
   onClick={() => navigate("/your-path-here")}>
click me
</Button>

do not forget to install from mui.com to use the <Button></Button> component

score:42

react-router-dom exports a hook called useHistory. Just import it and use it in your component like this:

import React from 'react';
import { useHistory } from 'react-router-dom';

export default () => {
  const history = useHistory();
   
  return (
    <button onClick={() => history.push('/your/path')}>
      Click me
    </button>
  );
};

I'm using:

  • "react": "^16.13.1"
  • "react-router-dom": "^5.2.0"

Check this post for more details: https://ultimatecourses.com/blog/programmatically-navigate-react-router

score:48

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

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

Or you can use the <NavLink />2.

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


Related Query

More Query from same tag