[英]`react-router` warning solution and passing root props to sub routes
Sometime I was sawing the well known warning, 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
browser.js:49 Warning: [react-router] You cannot change <Router routes>; it will be ignored
and I found two trend issues that friends discussed about this issue and the solution is const
routes components and putting them inside Router
component. 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/ReactTraining/react-router/issues/2704
https://github.com/reactjs/react-router-redux/issues/179 https://github.com/reactjs/react-router-redux/issues/179
Just like below: 如下所示:
you will see warning with this code: 你会看到这个代码的警告:
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>
)
}
}
but you won't see warning with this code: 但是你不会看到这个代码的警告:
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>
)
}
}
This is OK, awesome solution to vanish [react-router] warning, and for Root Component
changing state
the routes
was static and you won't see any warnings. 这是可行的,消除[react-router]警告的绝佳解决方案,对于
Root Component
更改state
, routes
是静态的,您将看不到任何警告。 BUT my issue is: I pass Root Component
props to each Route
and I can not do the above solution 😞 , I must put App Route
inside Router so with this method absolutely this is not solution method and I will saw the known warning again, see my router code: 但我的问题是:我将
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>
);
}
}
And the Root Component
render code is: Root Component
呈现代码是:
render(){
return(
<AppRoutes {...this}/>
);
}
I passed this as a props to AppRoutes
component and I need to pass inherited this.props
to sub Route
s and use them. 我通过这个作为道具
AppRoutes
成分,我需要通过继承this.props
分Route
S和使用它们。 how I could won't see warning and pass props to any Route
s? 我怎么能看到警告并将道具传递到任何
Route
?
One of my solution is that, I write all Route
s as static and call Root Component
props
directly inside each component, but how? 我的一个解决方案是,我写的所有
Route
S作为静态和调用Root Component
props
直接在每个组件内,但如何? I don't know how I can call and keep props
of Root Component
inside the component that need to have props
of Root Component
as the component is not direct Root Component
children? 我不知道我怎么能叫,并保持
props
的Root Component
需要有组件内props
的Root Component
作为组件不是直接Root Component
的孩子吗?
You can use render
route prop instead of component
to pass props to your components : 您可以使用
render
route prop而不是component
来将props传递给组件:
<Route path="/transaction" render={() => <Transaction {...this.props} />} />
Edit : Or this to also pass route props : 编辑:或者这也传递路径道具:
<Route path="/transaction" render={(routeProps) => <Transaction parentProps={this.props} {...routeProps} />} />
(I think it's better to pass individual custom parent props to not enter in conflict with routeProps) (我认为最好将单个自定义父道具传递给不与routeProps冲突)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.