How can I use React Router's withRouter HOC inside my own higher order component (HOC)?

问题

I have a higher order component which uses the location.search prop provided by React Router to construct a queryParams object and pass it as a prop to its wrapped component.

function withQueryParams(WrappedComponent) {
    return (props) => {
        const queryParams = myUtils.parseParams(props.location.search); // props.location provided by React Router
        const newProps = {
            ...props,
            queryParams: queryParams
        }

        return <WrappedComponent {...newProps} />
    }
}

export default withQueryParams

And I'd use it like this:

class MyComponent extends React.Component { ... }

export default withQueryParams(MyComponent)

And of course I'd wrap MyComponent in a route:

<Route path="/mycomponent" component={MyComponent} />

But going back to my withQueryParams HOC, I'd like to ensure that props.location is always available, meaning I'd like it always to have props from React Router. Enter withRouter, which is itself a HOC provided by React Router that you can use to make those props available.

What would be the best way to use withRouter inside my withQueryParams HOC to ensure that props.location is available?

Thanks.

回答1:

function withQueryParams(WrappedComponent) {
        return withRouter((props) => {
           const queryParams = myUtils.parseParams(props.location.search); // props.location provided by React Router
           const newProps = {
               ...props,
               queryParams: queryParams
           }

           return <WrappedComponent {...newProps} />
        })
}

export default withQueryParams

回答2:

You can wrap your component with both the HOCs namely withRouter and withQueryParams. You can use recompose to wrap your components with these HOCs. I've created a sandbox for this. https://codesandbox.io/s/y493w29lz

First, Hit the https://y493w29lz.codesandbox.io/main. This will display following output on the screen.

MainComponent
SubComponent
"No Query Params available"

Now, Try passing a query parameter e.g. https://y493w29lz.codesandbox.io/main?query=hello. You can see that the query parameters are printed on the screen.

MainComponent
SubComponent
Query Params = {"query":"hello"}

Here, The component SubComponent is not rendered by the Route but it is receiving the query parameters as we have wrapped this component using the withRouter and withQueryParms HOCs.

export const SubComponent = compose(
  withRouter,
  withQueryParams
)(SubComponentView);

Now, If you render the SubComponent only by hitting the URL https://y493w29lz.codesandbox.io/sub?query=hello. It will display the following output.

SubComponent
Query Params = {"query":"hello"}

Hope this answers your question. :)

来源：https://stackoverflow.com/questions/51599479/how-can-i-use-react-routers-withrouter-hoc-inside-my-own-higher-order-component

标签

javascript

reactjs

react-router

react-redux