export 'withRouter' (imported as 'withRouter') was not found in 'react-router'
The error "export 'withRouter' (imported as 'withRouter') was not found in 'react-router'” occurs when we try import withRouter from the react-router which is removed in version 6(React Router V6). Below are the possible solutions for this error.
Use the React Router hooks instead of withRouter function if we are working in a function component.
If we are working in the class component, we can create our own withRouter higher-order component using react hooks.
Install version 5.2.0 of react-router by running npm install [email protected].
Use React Router Hooks
If we are working with React function component we don't need to import withRouter from react-router. Instead, we can use the React Router hooks. For example, we can use of useNavigate hook as an alternative to the withRouter
function for relative navigation from the current location.
React Router V6 introduced the following hooks:
useHistory
The useHistory() hook gives us access to the history instance that we may use to navigate.
useLocation
The useLocation() hook returns the location object that represents the current URL. It returns an object with the following properties
- pathname: This is the path of the URL.
- search: This is the query string (?) included in the URL.
- hash: This is the result of the hash fragment (#) from the URL.
The useLocation object will update each time when the URL changes.
useParams
The useParams hook returns an object of key/value pairs of URL parameters.
useRouteMatch
The useRouteMatch hook returns a match object which includes:
- isExact: Check if the entire URL was matched.
- params: Key/values pairs parsed from the URL.
- path: The path pattern used to match.
- url: The matched portion of the URL.
Create our own withRouter HOC using react hooks
If we are working on a class component, we can create our own withRouter higher-order component using react hooks. The custom withRouter HOC is given below.
import { useLocation, useNavigate, useParams } from 'react-router-dom';
function withRouter(Component) {
function ComponentWithRouterProp(props) {
let location = useLocation();
let navigate = useNavigate();
let params = useParams();
return (
<Component
{...props}
location={location}
params={params}
navigate={navigate}
/>
);
}
return ComponentWithRouterProp;
}
export default withRouter;
After creating the above component, we need to change the withRouter imports from react-router to the location of our custom withRouter HOC.
Install version 5.2.0 of react router
Another solution to fix this error is to use the React Router hooks to install version 5.2.0 of react-router by running npm install [email protected]. We can check the current version of react-router in the package.json file in the root directory. Before installing react-router version 5.2.0 uninstall the current version.
To install react-router 5.2.0 run the below command.
# Install with npm
npm install [email protected] [email protected]
#install with yarn
yarn add [email protected] [email protected]
Conclusion
To solve the error "export 'withRouter' (imported as 'withRouter') was not found in 'react-router'” we can use react-router hooks instead of withRouter if we working with React Router V6 and function component. In the class component, we can create our own custom withRouter HOC. Otherwise, we can uninstall the current react-router version and install react-router with version 5.2.0.
On datainfinities.com, Read articles all around JavaScript, React, Node.js, PHP, Laravel, and Shopify.
Related Blogs
Expected an assignment or function call and instead saw an expression in React
Expected `onClick` listener to be a function, instead got a value of `string` type
'Switch' is not exported from 'react-router-dom'
Remove an item from an array in JavaScript
Warning: The tag is unrecognized in this browser
node: --openssl-legacy-provider is not allowed in NODE_OPTIONS
'react-scripts' is not recognized as an internal or external command
How to disable a Link in React
Explore All Blogs