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

Question

我有一个高阶组件，它使用 React Router 提供的 location.search 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} />

但回到我的 withQueryParams HOC，我想确保 props.location 始终可用，这意味着我希望它始终具有来自 react 路由器。输入 withRouter，它本身是 React Router 提供的 HOC，您可以使用它来使这些 props 可用。

在我的 withQueryParams HOC 中使用 withRouter 以确保 props.location 可用的最佳方法是什么？

谢谢。

Answer 1

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

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

MainComponent
SubComponent
"No Query Params available"

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

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

这里，组件 SubComponent 没有被 Route 渲染，但是它正在接收查询参数，因为我们使用 withRouter 包装了这个组件> 和 withQueryParms HOC。

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

现在，如果您仅通过点击 URL https://y493w29lz.codesandbox.io/sub?query=hello 来呈现 SubComponent .它将显示以下输出。

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

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