如何在我自己的高阶组件 (HOC) 中使用 React Router 的 withRouter HOC？

我有一个更高阶的组件，它使用location.searchReact Router 提供的 prop 用来构造一个queryParams对象并将其作为 prop 传递给其包装的组件。

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

我会这样使用它：

class MyComponent extends React.Component { ... }

export default withQueryParams(MyComponent)

当然我会包装MyComponent在路线中：

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

但回到我的withQueryParamsHOC，我想确保props.location始终可用，这意味着我希望它始终拥有来自 React Router 的 props。进入withRouter，它本身就是 React Router 提供的 HOC，您可以使用它来使这些 props 可用。

最好的使用方法是什么withRouter在我里面withQueryParamsHOC 确保props.location有空吗？

Thanks.

您可以使用两个 HOC 来包装您的组件，即withRouter and withQueryParams。您可以使用重组 https://github.com/acdlite/recompose用这些 HOC 包装您的组件。我为此创建了一个沙箱。https://codesandbox.io/s/y493w29lz https://codesandbox.io/s/y493w29lz

首先，点击https://y493w29lz.codesandbox.io/main https://y493w29lz.codesandbox.io/main。这将在屏幕上显示以下输出。

MainComponent
SubComponent
"No Query Params available"

现在，尝试传递查询参数，例如https://y493w29lz.codesandbox.io/main?query=hello https://y493w29lz.codesandbox.io/main?query=hello。您可以看到查询参数打印在屏幕上。

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

在这里，组件SubComponent不是由Route但它正在接收查询参数，因为我们使用以下方法包装了该组件withRouter and withQueryParms HOCs.

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

现在，如果您渲染SubComponent只需点击 URLhttps://y493w29lz.codesandbox.io/sub?query=hello https://y493w29lz.codesandbox.io/sub?query=hello。它将显示以下输出。

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

希望这能回答您的问题。 :)