Question

我正在使用React-Router 4来创建一些路由。（它使用official docs中的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）。

Answer 1

你能尝试这样做吗？

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

因为现在Wrapper HOC正在返回一个函数，但是反应元素是预期的。要获得react元素，我们需要使用所需的道具来调用此函数，这似乎是添加额外道具this.authenticate的好地方。

这是我制作的快速片段： https://stackblitz.com/edit/react-zestnq

在HOC中包装React路由渲染功能

1 个答案: