Question

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

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 Router的道具。输入withRouter，它本身就是React Router提供的HOC，您可以使用它来使这些道具可用。

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

谢谢。

Answer 1

您可以使用两个withRouter和withQueryParams这两个HOC来包装您的组件。您可以使用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"}

希望这可以回答您的问题。：）

Answer 2

http
.and().formLogin().loginPage("/user").permitAll()

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

2 个答案: