How To Fix Error “Export ‘useHistory’ Was Not Found” In React-Router-Dom

When working with react-router-dom, you use the usehistory() and get the following error message: “Export ‘usehistory’ was not found” in react-router-dom. Let’s see how to solve this problem.

Cause of the error

From the version 6, react-router has replaced the useHistory() with useNavigate(). So when you use a new version of react-router but still work with the old hook, the program will give an error.

How to fix the error “Export ‘useHistory’ was not found”?

Method 1: Use ‘useNavigate()‘ instead of ‘useHistory()‘

The solution for this error is to use useNavigate() instead of useHistory().

The useNavigate() hook returns a function that allows you to navigate programmatically.

Note that there are a few changes from using useHistory():

1. Use navigate('/filepath') instead of history.push('/filepath').
2. Use navigate('/filepath', {replace: true}) instead of history.replace('/filepath').
3. If you want to work with ‘state’, use the command similar this example: navigate('/filepath', {state : { id = 123 }}

To use useNavigate(), we must first import it according to the following syntax:

import { useNavigate } from 'react-router-dom';

Now let’s go through an example to see how useNavigate() works and the difference with useHistory().

Here is my folder structure:

In Home.js:

import './test.css';
import { useNavigate } from 'react-router-dom';

export default function Home() {
    const navigate = useNavigate();
    const handleClick = () => {
        console.log('Redirecting');
        navigate('/products'); // Replace history.push('/products')
    }

	return (
        <div className='container'>
            <div className='title'>Home Page</div>
            <button className="btn btn-primary" onClick={handleClick}>Go to Products</button>
        </div>                          
    )
}

In Products.js:

import './test.css';
import { useNavigate } from 'react-router-dom';

export default function Products() {
    const navigate = useNavigate();
    const handleClickBack = () => {
        console.log('Redirecting');
        navigate(-1);
    }

	return (
        <div className='container'>
            <div className='title'>Products Page</div>
            <button className="btn btn-primary" onClick={handleClickBack}>Go back</button>
        </div>
    )
}

Declare routes in App.js file:

import { Route, Routes } from 'react-router-dom';
import './App.css';
import Home from './components/Home';
import Products from './components/Products';

export default function App() {
    return (
        <div>
            <Routes>
                <Route path="/home" element={<Home />} />
                <Route path="/products" element={<Products />} />
            </Routes>
        </div> 
	)
}

Output:

Through the above program, I showed you how to use useNavigate() to switch between pages. In a particular case, you can pass the value ‘-1‘ into navigate() to return to the previous page. This action is similar to pressing the back button on the browser.
In case you set {replace: true}, if you navigate to a new page, a new path will replace the current path in the stack instead of adding a new one. So you won’t be able to go back to the previous page because it doesn’t exist in the stack.

Method 2: Downgrade the react-router version

Currently, version 5 of react-router is still supported. If you want to use useHistory(), you can continue using react-router v5.

However, this method is not recommended as there will be new updates for future react-router versions. Older technologies will be gradually replaced and unsupported in the future. Using older versions will make it difficult for you to work on future projects, so think carefully.

Summary

In this article, with just a few minor adjustments, you can fix the error “Export ‘useHistory’ was not found” in react-router-dom. Thank you for your reading!

Maybe you are interested:

• Error [err_package_path_not_exported]: package subpath
• You cannot render a Router inside another Router
• useLocation() may be used only in the context of a Router component
• Too many re-renders. React limits the number of renders to prevent an infinite loop

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js