useHistory react-router-dom invalid hook call

Question

I am trying to implement useHistory hook from react-router-dom and it doesn't seem to work. Throws invalid hook call

App.js

import React, { Component } from 'react';
<...>
import { Signup } from './Signup.js';
import { Login } from './Login.js';
import { Account } from './Account.js';
import { AuthProvider } from './contexts/AuthContext.js';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

class App extends Component {
    <...>

    render() {
        return(
            <>
               <...>
                <Router>
                    <AuthProvider>
                        <Switch>
                            <Route exact path="/" component={Signup} />
                            <Route path="/signup" component={Signup} />
                            <Route path="/login" component={Login} />
                            <Route path="/account" component={Account} />
                        </Switch>
                    </AuthProvider>
                </Router>
            </>
        );
    }
}

export default App;

Account.js

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

export const Account = () => {
    const history = useHistory();
    return(
        <h1>Hello...</h1>
    );
}

And it throws error on this line: const history = useHistory();

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: <...>

Latest React version, latest React Router version, also if it makes any difference I installed react-router-dom after create-react-app. Link(s) and routes itself are working without any issues. Found few topics on this here but no clear/working solution. Thank you.

I don't see an issue with the supplied code snippets. Think you try reproducing this into a *running* codesandbox and provide the link in your question so we may live debug in it? — Drew Reese, Jan 01 '21 at 10:12
Similar issue, no idea why it wasn't working. I ended up deleting node_modules, cleared the cache and reinstalled the dependencies. Worked perfectly fine after that. — RSquared, Jul 13 '21 at 15:49

score 5 · Answer 1 · answered Jan 01 '21 at 11:01

5

Found a solution: previously I installed react-router-dom directly from macOS terminal and everything worked except for useHistory, however this time I installed react-router-dom directly from VS code's terminal and it seems to be working fine now. Hope this helps to anybody having this issue.

answered Jan 01 '21 at 11:01

devtom

101
4

wow after 4 hours work and search your simple solution work with me me to ( i have clone repo and run yarn after that useHistory not working ) but after install manually ( yarn add react-router-dom ) every think work fine THX PRO – Mohamd Almhde Feb 28 '21 at 10:00

score 1 · Answer 2 · answered May 03 '21 at 20:06

In my case the error was caused by something I couldn't find elsewhere.

Taking your example, I was using something of the likes:

<Route path="/signup" children={Signup} />
// So I changed it to
<Route path="/signup" component={Signup} />

Notice component prop in <Route />

I believe the Error was caused because component just calls the component and children appends it so I would be calling react and/or hooks twice.

If anyone knows and can explain better, feel free to do so!

I want to add that I had this same issue when using useParams(). I was able to solve it with the above modification. — codeinaire, Jul 18 '21 at 01:46

score 0 · Answer 3 · answered Sep 09 '21 at 05:34

0

I checked the package.json and noticed that I hadn't npm install react-router-dom.

answered Sep 09 '21 at 05:34

agelgel

51
1
2

This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/29779100) – Adam 'Crashdoom' Walker Sep 09 '21 at 12:57

useHistory react-router-dom invalid hook call

3 Answers3