[英]`react-router` warning solution and passing root props to sub routes
有时我看到了众所周知的警告, browser.js:49 Warning: [react-router] You cannot change <Router routes>; it will be ignored
browser.js:49 Warning: [react-router] You cannot change <Router routes>; it will be ignored
,我发现朋友讨论过这个问题的两个趋势问题,解决方案是const
路由组件并将它们放在Router
组件中。
https://github.com/ReactTraining/react-router/issues/2704
https://github.com/reactjs/react-router-redux/issues/179
如下所示:
你会看到这个代码的警告:
class Root extends Component {
render() {
return (
<Router history={browserHistory} createElement={this.createElement}>
<Route component={App}>
<Route path="/" component={MainPage}/>
<Route path="/page2" component={Page2}/>
<Route path="/settings" component={SettingsPage}/>
</Route>
</Router>
)
}
}
但是你不会看到这个代码的警告:
const routes = (
<Route component={App}>
<Route path="/" component={MainPage}/>
<Route path="/page2" component={Page2}/>
<Route path="/settings" component={SettingsPage}/>
</Route>
);
class Root extends Component {
render() {
return (
<Router history={browserHistory} createElement={this.createElement}>
{routes}
</Router>
)
}
}
这是可行的,消除[react-router]警告的绝佳解决方案,对于Root Component
更改state
, routes
是静态的,您将看不到任何警告。 但我的问题是:我将Root Component
道具传递给每个Route
并且我无法执行上述解决方案😞,我必须将App Route
放入Router中,所以这个方法绝对不是解决方法,我会再次看到已知警告,请参阅我的路由器代码:
export default class AppRoutes extends Component {
render() {
return (
<Router history={hashHistory}>
<Route path="/" {...this.props} component={App}>
<IndexRoute component={Home} {...this.props}/>
<Route path="/transaction" component={Transaction} {...this.props}/>
<Route path="/users-management" component={UsersManagement} {...this.props}/>
<Route path="/issues" component={Issues} {...this.props}/>
<Route path='/not-found' component={NotFound}/>
<Route path='/settlement-management' component={SettlementManagement} {...this.props}/>
<Route path='/categories-management' component={CategoriesManagement} {...this.props}/>
<Route path='/gifts-management' component={GiftsManagement} {...this.props}/>
<Redirect from='/*' to='/not-found'/>
</Route>
</Router>
);
}
}
Root Component
呈现代码是:
render(){
return(
<AppRoutes {...this}/>
);
}
我通过这个作为道具AppRoutes
成分,我需要通过继承this.props
分Route
S和使用它们。 我怎么能看到警告并将道具传递到任何Route
?
我的一个解决方案是,我写的所有Route
S作为静态和调用Root Component
props
直接在每个组件内,但如何? 我不知道我怎么能叫,并保持props
的Root Component
需要有组件内props
的Root Component
作为组件不是直接Root Component
的孩子吗?
您可以使用render
route prop而不是component
来将props传递给组件:
<Route path="/transaction" render={() => <Transaction {...this.props} />} />
编辑:或者这也传递路径道具:
<Route path="/transaction" render={(routeProps) => <Transaction parentProps={this.props} {...routeProps} />} />
(我认为最好将单个自定义父道具传递给不与routeProps冲突)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.