Why am I getting TypeError: Cannot read property 'push' of undefined react-router-dom

Question

I'm just checking if I have language in redux store or not. If I have, I'll save that in my localStorage, if not I want to navigate to a component call MultiLanguage.
I used below approach using history but it's showing mw an error. What is it showing push of undefined and what could be solution for this?

const history = useHistory();
  const language = store.getState().languages.selectedLangauge.language;
  console.log("language", language);
  if (language) {
    localStorage.setItem("language", language);
  } else {
    history.push("/multilanguage");
  }
  return (
    <div className="font-metropolis_regular">
      <Router>
        <Route path="/" exact component={Selection} />
        <Route path="/login" component={Login} />
        <Route path="/home" component={Homepage} />
        <Route path="/account" component={Account} />
        <Route path="/multilanguage" component={MultiLanguage} />
      </Router>
    </div>
  );

one mistake is use switch as wrapper of all route https://reactrouter.com/web/api/Switch — Avani Bataviya, Jul 19 '21 at 11:48
[You can't use a router hook outside of the actual router.](https://stackoverflow.com/questions/64838587/how-to-properly-use-usehistory-from-react-router-dom) — Andy, Jul 19 '21 at 11:49
@AvaniBataviya Now, I added the Switch, but still getting error. — Chandler Bing, Jul 19 '21 at 12:28

score -1 · Accepted Answer · answered Jul 19 '21 at 13:55

The reason is simple, as the error says, your useHistory hook returns undefined. This happens because this hook can only be called inside a component wrapped by Router so the decision might be moving it one level up. Take a look at this for code examples https://flaviocopes.com/react-router-uselocation-usehistory-undefined/

Why am I getting TypeError: Cannot read property 'push' of undefined react-router-dom

1 Answers1

Linked