5

我正在使用 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>

如您所见，HomeandClients组件被包装在一个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）。

4

1 回答 1

2

您可以尝试这样做吗：

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

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

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

于 2017-08-25T10:08:12.293 回答