‘withRouter’ is not exported from ‘react-router-dom’

by

If you accidentally installed react-router-dom v6 then the withRouter HOC no longer exists. Either revert back to v5 (run npm install -s react-router-dom@5), or roll your own custom withRouter HOC to inject the props you need or convert the components to function components and use the React hooks.

Create custom withRouter Higher Order Component

From the FAQ: What happened to withRouter I need it

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}
        router={{ location, navigate, params }}
      />
    );
  }

  return ComponentWithRouterProp;
}

Convert to function component

There is now also no longer a history object to use, it was replaced by a navigate function accessed via the useNavigate hook. It’s not clear where history was being used previously, but if you need to imperatively navigate the following is how you access the navigation. If staying with v6 then the following is how to access the navigate function.

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

import './menu-item.scss';

const MenuItem = ({ title, imageUrl, size }) => {
  const navigate = useNavigate();

  // navigate("/targetPath")

  return (
    <div className={`${size} menu-item`}>
      <div
        className="background-image"
        style={{
          backgroundImage: `url(${imageUrl})`,
        }}
      />
      <div className="content">
        <h1 className="title">{title.toUpperCase()}</h1>
        <span className="subtitle">SHOP NOW</span>
      </div>
    </div>
  )
};

export default MenuItem;

More Related Contents:

  1. React : difference between and
  2. How to create a protected route?
  3. React-router-v6 access a url parameter
  4. React Router v4 renders multiple routes
  5. How to pass params into link using React router v6?
  6. react-router-dom v6 useNavigate passing value to another component
  7. Detect Route Change with react-router
  8. Simple Conditional Routing in Reactjs
  9. React router v6 how to use `navigate` redirection in axios interceptor
  10. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  11. Invariant failed: You should not use outside a
  12. useNavigate() may be used only in the context of a component
  13. React Router not working with Github Pages
  14. React Router Dom v6 shows active for index as well as other subroutes
  15. What is the alternative for Redirect in react-router-dom v 6.0.0?
  16. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  17. How to use Private route in react-router-dom@v6
  18. Difference in the navigation (React Router v6)
  19. Error: useHref() may be used only in the context of a component. It works when I directly put the url as localhost:3000/experiences
  20. react app showing empty page when redirecting on production build
  21. React App goes blank after importing React-Router-Dom
  22. React Router 4 Nested Routes not rendering
  23. You cannot render a inside another . You should never have more than one in your app
  24. Children won’t render when using a layout in ReactJS
  25. How to go back to previous route in react-router-dom v6
  26. React Router V6 – Error: useRoutes() may be used only in the context of a component
  27. How to use callback with useState hook in react [duplicate]
  28. Why, exactly, do we need React.forwardRef?
  29. You should not use outside a
  30. Create-React-App Proxy in Production Build

Leave a Comment