Uncaught TypeError: (0 , _reactRouterDom.useNavigate) is not a function

Question

I have been seeing this error from today while creating a new app. I knew there were few changes with the react-router-dom new version and so have installed the older version.

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

Not sure what is wrong.

Code of the App component

import { Container } from 'react-bootstrap';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import LoginScreen from './screens/LoginScreen'


const App = () => {
  return(
    <Router>
      <Header />
          <main className='py-3'>
            <Container>
                <Route path='/' component={LoginScreen} />
            </Container>
          </main>
      <Footer />
    </Router>
    ) 

Can anyone please help me with this? Please let me know if any other details have to be added.

Answer 1

From the migration guide upgrading/v5#use-usenavigate-instead-of-usehistory, useNavigate hook is added for react-router v6.

Please check if there is any component that uses this hook. For react-router v5, you should use useHistory() to get the history object and perform the navigation.