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.

  1. Use the React Router hooks instead of withRouter function if we are working in a function component.
  2. If we are working in the class component, we can create our own withRouter higher-order component using react hooks.
  3. 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

  1. pathname: This is the path of the URL.
  2. search: This is the query string (?) included in the URL.
  3. 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.

Related Blogs

ckeditor

How to Integrate Custom Build CKEditor5 with React

Explains how to create a custom build CKEditor5 and integrate with react with sample code.

Objects Are Not Valid as a React Child

React objects are not valid as a react child

The React error "Objects are not valid as a React child" occurs when we render an object or an array in our JSX code. We can't use JavaScript objects as a child in React.

Can't Perform a React State Update on an Unmounted Component

Can't Perform a React State Update on an Unmounted Component

React Warning “Can't perform a react state update on an unmounted component” is caused when we try to update the state after the component was unmounted. Explains how to fix it.

Each child in a list should have a unique key prop

Each child in a list should have a unique key prop

Solve Warning: Each child in a list should have a unique ”key" prop in React by setting the id property as a unique key or by auto-assigning unique keys.

React Hook is Called Conditionally

React Hook is Called Conditionally

Error: "React Hook is called conditionally. React Hooks must be called in the exact same order in every component render" occurs when hooks are invoked conditionally or after a return of a value.

Too many re-renders. React limits the number of renders to prevent an infinite loop

Too many re-renders. React limits the number of renders to prevent an infinite loop

The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens when you have reached an infinite render loop.

Adjacent JSX elements must be wrapped in an enclosing tag

Adjacent JSX elements must be wrapped in an enclosing tag

The "Adjacent JSX elements must be wrapped in an enclosing tag" error can be solved by wrapping the multiple elements in a parent div or in a react fragment

The tag is unrecognized in this browser

Warning: The tag is unrecognized in this browser

Warning "The tag is unrecognized in this browser" occurs when the tag doesn't exist in the browser or when we render a component starting with a lowercase letter.

The style prop expects a mapping from style properties to values, not a string

The style prop expects a mapping from style properties to values, not a string

"The style prop expects a mapping from style properties to values, not a string" React error occurs when we pass a CSS string to the style attribute.