How to properly use useHistory () from react-router-dom?

Question

How to use useHistory() correctly? I can't make the transition from one react component to another. According to the instructions from the React documentation and also here on Stack Overflow, I cannot make the transition from App.js to MyComponent.js.

For example - I am trying

/* **App.js ** */
/* Import modules */
import React from 'react';
import { useHistory } from 'react-router-dom'; // version 5.2.0

function App()
{
    let history = useHistory ();
    const handleClick = () => {
       history.push ('./pages/MyComponent');
    }    

    return (
       <div className="App">
          <button onClick={handleClick}>Next page ==></button>
       </div>
    );
}

I also tested this example, but the output throws the following error when the button is pressed:

TypeError: Cannot read property 'push' of undefined

Does something seem to be leaking to me or is there a mistake on Babel's side?

Project react structure:

+ Root/
    + src/
        - App.js
        - index.js
        + pages/
            - MyComponent.js

Could it be that you have a space between `push` and the parentheses? — BlackMath, Nov 14 '20 at 21:12

score 93 · Answer 1 · edited Dec 08 '21 at 21:18

93

This has changed in v6, useHistory is now useNavigate and we can use it as follows:

instead of:

const history = useHistory()
history.push('/')

we now use:

const navigate = useNavigate()
navigate('/')

edited Dec 08 '21 at 21:18

Newbyte

2,421
5
22
45

answered Dec 08 '21 at 12:22

HibaHasan

1,255
2
5
12

2

can i navigate i step back , like prev page using useHistory ? – How to Program Feb 03 '22 at 06:01
5

useHistory() is dead now, don't use it – HibaHasan Feb 05 '22 at 09:36
@HibaHasan I am using ^5.3.0 react-router-dom still face same issue – Priyanka Sankhala Feb 05 '22 at 14:30
@HowtoProgram Pass the delta you want to go in the history stack. For example, navigate(-1) is equivalent to hitting the back button. – JesseBoyd Jan 11 '23 at 01:10

score 24 · Accepted Answer · edited Nov 27 '21 at 13:37

You can't just use the useHistory hook to redirect to another page. You need to properly set up your application in order to use React Router. Look at their examples starting from this https://reactrouter.com/web/example/basic

You need to wrap your entire application with <BrowserRouter /> which will give the history object you are looking for through the hook.

By the way, you don't give a relative file path to history.push as an argument, you must give a valid route that you typically setup using <Route /> component

score 4 · Answer 3 · edited May 25 '22 at 22:19

4

Using React 17.0>, this works for me:

import { useHistory } from "react-router-dom";

const history = useHistory();
history.push("/home");

I've reached too much to find this correctly use of the useHistory function. Try and answer this post for feedback.

edited May 25 '22 at 22:19

Luca

1,588
2
22
26

answered May 20 '22 at 18:10

Kün

49
1

score 1 · Answer 4 · answered Nov 14 '20 at 21:40

1

you need to use it with react-router-dom. set your router config and then push it to that path. you can get more information by looking at documentation.

https://reactrouter.com/web/example/route-config

do not forget to set your switch components and your exact for root path.

answered Nov 14 '20 at 21:40

kubilay

21
1
2

we can't see his routes. app.js usually contain that Routes and there is a route that sends you to the first component. it seems he is trying to get history from the first component without set any routes. – TalOrlanczyk Nov 14 '20 at 21:53
i agree. he is using relative path not absolute. – kubilay Nov 14 '20 at 23:04
ya he can use the withRouter but there is no sue if you build stuff the right way – TalOrlanczyk Nov 14 '20 at 23:39
I updated the question and added the tree structure of the project. @TalOrlanczyk – Petr Fořt Fru-Fru Nov 15 '20 at 11:12

score 1 · Answer 5 · answered Feb 12 '21 at 19:17

1

Using history.replace('/<route-name>') also works.

answered Feb 12 '21 at 19:17

Fruno

81
10

I'm downvoting this because the problem is that he doesn't have `history` in scope in the first place, not that the push method isn't working and was looking for an alternative method. In his case, neither push nor replace would work. – coblr Mar 14 '23 at 00:42

score 1 · Answer 6 · answered Sep 08 '21 at 17:41

1

When you are applying history.push, is that your path name? history.push('/pathname') is the process I guess. You can see here: https://reactrouter.com/web/api/Hooks

answered Sep 08 '21 at 17:41

SGhosh

41
4

How to properly use useHistory () from react-router-dom?

6 Answers6

Linked