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?

soywod · Accepted Answer · 2017-07-03T05:22:25.030

59

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

edited Jul 03 '17 at 05:22

answered Jul 03 '17 at 05:01

soywod

4,377
3
26
47

1

can you please tell me what is `withRouter` here ? – Pardeep Jain Oct 03 '17 at 07:05
what if we have a stateless component – Shreyan Mehta Jan 06 '19 at 15:47
A stateless component will have `history` in props when wrapped in withRouter – JMadelaine Feb 06 '19 at 20:12
3

withRouter is known as a HOC (https://reactjs.org/docs/higher-order-components.html) it is just another way of injecting functionality into your components, this is an easy way now in V4 to get access to the match and history objects – Faktor 10 Jun 13 '19 at 13:46
sadly the code is not working for me. I get the error that `withRouter` should not be used outside of `Router` – IonicMan Aug 17 '21 at 13:32

score 56 · Answer 2 · answered Jan 26 '19 at 12:29

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

score 45 · Answer 3 · answered Sep 22 '20 at 01:45

45

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

answered Sep 22 '20 at 01:45

Bruno Ribeiro

646
6
13

What are the differences between useHistory and Link (wrap around the button)? Thanks – Hong Ly Oct 22 '21 at 05:05
@HongLy the Link component renders a `` tag, and you shouldn't put a button inside it. Here's a good explanation why: https://stackoverflow.com/a/6393863/7948938. In this case, it'd be better to use the Link component only, stylized to look like a button. – Bruno Ribeiro Oct 24 '21 at 20:22
This is not a good answer because you lose out on accessibility. – Malik Bagwala May 27 '22 at 07:51
@MalikBagwala tha accessibility problem you are mentioning is baked in the question. It asks for navigation on button clicks. – Bruno Ribeiro May 29 '22 at 02:37

score 30 · Answer 4 · answered Feb 07 '22 at 20:01

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 1 · Answer 5 · answered Jul 17 '22 at 19:18

1

in react-router-dom version 6, you can also use the Link component too. This is to back @Abey Bruck's answer

import { Button } from "@chakra-ui/react";
...

const Home = () => {
  return (
    <Button as={Link} to={'/login'}>Login Page</Button>
  )
}

answered Jul 17 '22 at 19:18

AbdulAzeez Olanrewaju

976
1
13
32

score 1 · Answer 6 · answered Sep 14 '22 at 15:26

1

import { Button } from "@mui/material";
const navigate = useNavigate();
  const submitHandler = (e) => {
    e.preventDefault();
    navigate(`/`);
  };
<Button variant="contained" onClick={submitHandler}>Home Page</Button>

answered Sep 14 '22 at 15:26

Ridvan Saman

11
1

you should add some documentation on the `useNavigate` hook and a link so that the user can check docs and learn than just code – Saravanan Sep 18 '22 at 10:18

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

6 Answers6

Linked