将一个React路由渲染函数包装在高阶组件中

Question

我正在使用React-Router 4创建一些路由。（它使用官方文档中的PrivateRoute组件，但这与本问题无关。）

<HashRouter>    
    <Switch>
        <PrivateRoute exact path='/' component={Wrapper(Home)} />
        <Route exact path='/login' render={(props) => <Login authenticate={this.authenticate} {...props} />} />
        <PrivateRoute exact path='/clients' component={Wrapper(Clients)} />
    </Switch>
</HashRouter>

如您所见，Home和Clients组件都被包裹在HOC中。目前这个操作并没有实际作用：

const Wrapper = (Page) => {
    return (props) => (
        <div className="page">
            <p>This should be on every page</p>
            <Page {...props} />
        </div>
    );
}

这个很好用。我想不出如何将Login路由与同一个HOC包装在一起。我已经尝试过了。

<Route exact path='/login' render={(props) => Wrapper(<Login authenticate={this.authenticate} {...props} />)} />

但是这会返回错误：

Route.render(): 必须返回一个有效的 React 元素（或 null）。

- GluePear

Answer 1

你能试着这样做吗：

<Route exact path='/login' render={(props) => Wrapper(Login)({...props, authenticate: this.authenticate})} />

因为现在 Wrapper HOC 返回的是一个函数，但是需要一个 React 元素。为了获取 React 元素，我们需要使用所需的 props 调用此函数，这似乎是添加额外 prop this.authenticate 的好地方。

这是我制作的一个快速示例： https://stackblitz.com/edit/react-zestnq

- Gleb Kostyunin