我的 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 组件中?
最佳答案
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>
);
};
关于javascript - 尝试将自定义属性传递到React Router(使用v4),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46136264/