Export withrouter (imported as withrouter) was not found in react-router-dom

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 wothRouter HOC. Otherwise, we can uninstall the current react-router version and install react-router with version 5.2.0.

I solved my error by changing the way I was rendering my routes to the use of the element.

To:

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { Home } from "./app";
import { Login, Register } from "./auth";
const R: React.FC = () => {
  return (
    
      
        } />
        } />
        } />
      
    
  );
};
export default R;

Basically before v6.*:

import React from "react";
import { BrowserRouter as Router, Route, Switch} from "react-router-dom";
import { Home } from "./app";
import { Login, Register } from "./auth";
const R: React.FC = () => {
  return (
    
      
        
           
        
       
           
        

       
           
        
      
    
  );
};
export default R;

After v6.*

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { Home } from "./app";
import { Login, Register } from "./auth";
const R: React.FC = () => {
  return (
    
      
        } />
        } />
        } />
      
    
  );
};
export default R;

What can I use instead of withRouter in react router Dom?

Can you import redirect from react Dom to router?

Why useHistory is not found in react router Dom?

Why is switch not found in react router Dom?