javascript - `react-router` 警告解决方案并将 root props 传递给子路由

Question

有时我看到了众所周知的警告，browser.js:49 Warning: [react-router] You cannot change <Router routes>; it will be ignored我发现 friend 们讨论这个问题的两个趋势问题，解决方案是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的 Prop 我无法执行上述解决方案😞，我必须把App Route在路由器内部，因此使用此方法绝对不是解决方法，我将再次看到已知警告，请参阅我的路由器代码:

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}/>
    );
}

我将其作为 Prop 传递给 AppRoutes组件，我需要传递继承 this.props转至子Route并使用它们。我怎么看不到警告并将 Prop 传递给任何 Route是吗？

我的解决方案之一是，我写所有 Route s 为静态并调用 Root Component props直接在每个组件内部，但是如何呢？我不知道如何调用并保持props的Root Component在需要有 props 的组件内部的Root Component因为该组件不是直接的 Root Component children ？

Answer 1

您可以使用 render 路由属性而不是 component 将属性传递给您的组件:

<Route path="/transaction" render={() => <Transaction {...this.props} />} />

编辑:或者也可以传递路由 Prop :

<Route path="/transaction" render={(routeProps) => <Transaction parentProps={this.props} {...routeProps}  />} />

(我认为最好传递单独的自定义父属性，以免与routeProps冲突)