React Router 自动更改后如何更新状态？

Question

我有一个包含路由器和组件的文件。很快，代码是这样的：

// define the routes for each language ..
const InnerRoutes = (
    <Route>
        <IndexRoute page="home" component={StaticPage}></IndexRoute>
        <Route path="contacts" component={ContactsPage}></Route>
        <Route path="(:page)" component={StaticPage}></Route>
    </Route>
);

// define the routes for all the languages, using InnerRoutes .. 
const AllRoutes = (
    <Router history={browserHistory}>
        <Route path='/' component={App} language="bg">
            {InnerRoutes}
            <Route path="en" language="en">
                {InnerRoutes}
            </Route>
        </Route>
    </Router>
);

// and render our app ..
ReactDOM.render(
    AllRoutes,
    document.getElementById('app')
);

我的问题是：当触发路由器更改时，如何更改 App 组件状态？ 当然 - 让路由器参数处于应用状态。

（因为目前我可以从App 组件的方法componentDidUpdate 中获取路由器的东西，然后触发setState 以更改App 状态。不幸的是 - 然后我触发了componentDidUpdate 两次。）

Answer 1

我已将此添加到我的应用程序中，并且它似乎会在路线更改时收到更改。更多参考here

class App extends React.Component {

  ...

  getInitialState() {
      return {
         lang: 'en' // default
      };
  }

  componentWillReceiveProps(props) {
      console.log('location: ', props.location.pathname);
      var newLang = props.location.pathname.split('/').shift();
      if(this.state.lang !== newLang) {
          this.setState({lang: newLang});
      }
  }

  render() {

    const lang = this.state.lang;

    return (
        <AboutPage language={lang} />
        <Support language={lang} />
    );
  }
}

如果这不起作用，您还可以查看how two components talk to each other