React withRouter 和 class 组件路由器 v6 中访问的参数

Question

Recently i started new project and upgraded for it libraries to newest including react . I encountered first problem when accessing passed params from dynamic route inside class component. In the past in order to do it, one would need to wrap exported class component in withRouter function returned from router. In the documentation they say that this functionality has been removed in v6 and if you need it, it can be recreated manually docs link .

I created with-router.jsx file and pasted their code:

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;
}

next i added it to my class component:

import React, { Component } from 'react';
import withRouter from './with-router';

class Product extends Component {
    render() {
        return (
            <div className="product">...</div>
        );
    }
}

export default withRouter(Product);

and it does not work, there is following error:

Compiled with problems:
WARNING in ./src/components/product.jsx 67:15-25
export 'default' (imported as 'withRouter') was not found in './with-router' (module has no exports)

so it does not seem like their own code is working, maybe someone has an idea how to make it work? another thing is to consider future implications, functionality deleted without replacement and if you need it - recreate it? why remove if you have to manually add it anyway, does not make sense with react recently.

• "react": "^18.2.0"
• "react-dom": "^18.2.0"
• "react-router-dom": "^6.4.4"
• "webpack": "^5.74.0"
• "webpack-cli": "^4.10.0"
• "webpack-dev-server": "^4.11.1"

Answer 1

As the error points out, it seems you neglected to export your custom withRouter HOC.

Compiled with problems: WARNING in./src/components/product.jsx 67:15-25 export 'default' * (imported as 'withRouter') was not found in './with-router' ( module has no exports *)

* Emphasis is mine

Assuming you've shared the complete with-router.jsx file contents, it's missing a default export.

import {
  useLocation,
  useNavigate,
  useParams,
} from "react-router-dom";

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();

    return (
      <Component
        {...props}
        router={{ location, navigate, params }}
      />
    );
  }

  return ComponentWithRouterProp;
}

export default withRouter; // <-- add default export!

so it does not seem like their own code is working, maybe someone has an idea how to make it work?

The RRD code is well maintained and tested, I've not run across many blatant issues/bugs with their React hooks.

another thing is to consider future implications, functionality deleted without replacement and if you need it - recreate it? why remove if you have to manually add it anyway, does not make sense with react recently.

I think it does make sense with the direction React is going.

React has made it clear that Function components and React hooks are the future of React ( for now ) and that Class components are, for all intents and purposes, deprecated, though they are kept around for compatibility reasons. The functionality you describe as being "deleted", ie removed, was replaced... by the new React hooks, and the FAQ doc you referenced is made available as a compatibility bridge if you are using current RRDv6 components with older React code. Creating this HOC is trivial, if you need it, but if the main objective is to create React function components that use React hooks then there's no need or desire for RRD to export a withRouter HOC of their own that encourages "deprecated" React component coding patterns.

A good general rule here would be to use your new withRouter component on your older class components, and for any new components you create implement them as React Function components and use the React hooks. If you want you can rewrite/convert older class components to function components, but this is basically a "only if you really need/want to" and not a "don't just convert for the sake of converting" type of thing.