javascript - 尝试将自定义属性传递到React Router(使用v4)

Question

我的 App.js 中有以下渲染方法:

  render() {
    return (
      <LocaleProvider locale={enUS}>
        <Router history={history}>
          <div>
            <Header />
            <Switch>
              <Route exact path={home} component={requireAuth(Groups)} />
              <Route exact path={groups} component={requireAuth(Groups)} />
              <Route path={addcard} component={requireAuth(AddCard)} />
              <Route path={db} component={requireAuth(DbTbl)} />
              <Route component={NoMatch} />
            </Switch>
          </div>
        </Router>
      </LocaleProvider>
    );
  };

我想将自定义属性传递给前 2 条路由({home} 和 {groups})，因此我尝试执行以下操作:

 render() {
    const groups1 = () => <Groups studyState={this.toggleStudyState}/>;

    return (
      <LocaleProvider locale={enUS}>
        <Router history={history}>
          <div>
            <Header />
            <Switch>
              <Route exact path={home} render={requireAuth(groups1)} />
              <Route exact path={groups} render={requireAuth(groups1)} />
              <Route path={addcard} component={requireAuth(AddCard)} />
              <Route path={db} component={requireAuth(DbTbl)} />
              <Route component={NoMatch} />
            </Switch>
          </div>
        </Router>
      </LocaleProvider>
    );
  };

但是我从 react 路由器收到此错误消息:

connectAdvanced.js:3 Uncaught TypeError: Cannot call a class as a function

所以我怀疑 React Router 不喜欢带有 render= 属性的高阶组件语法。如何将 StudyState 属性传递到与前两个标签一起使用的 Groups 组件中？

Answer 1

render属性必须有一个函数传递给它。您正在上课。

写这样的东西:

<Route exact path={home} render={(routerProps) => {
  const AuthGroups = requireAuth(Groups);
  return <AuthGroups studyState={this.toggleStudyState}/>;
}} />

由于我不知道 requireAuth 是如何工作的，所以我不知道 studyState 属性是否会正确传递给 Group 组件。但我想它会的。

<小时/>

现在有一个更清晰的代码(如果上述解决方案有效):

renderAuthGroups(routerProps) {
    const AuthGroups = requireAuth(Groups);
    return <AuthGroups studyState={this.toggleStudyState}/>;
}
render() {
    return (
        <LocaleProvider locale={enUS}>
          <Router history={history}>
              <div>
                  <Header />
                  <Switch>
                      <Route exact path={home} render={this.renderAuthGroups.bind(this)} />
                      <Route exact path={groups} render={this.renderAuthGroups.bind(this)} />
                      <Route path={addcard} component={requireAuth(AddCard)} />
                      <Route path={db} component={requireAuth(DbTbl)} />
                      <Route component={NoMatch} />
                  </Switch>
              </div>
          </Router>
      </LocaleProvider>
    );
};