2016-11-08 20 views
1

ルータとコンポーネントを持つファイルがあります。まもなく、コードは次のようにされていますReact Routerが自動的に変更された後の状態を更新するには?

// 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からルータのものを取り、その後、App状態を変更するsetStateをトリガすることができます残念なことにので - 。。その後、私は二回トリガcomponentDidUpdateを持っている)

答えて

0

私はこれを追加しました私のアプリケーションとそれはルートが変更されたときに変更を受け取っているようだ。その他の参照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} /> 
    ); 
    } 
} 

これが動作しない場合は、[OK]を、それはそこから行くが、それは私のために動作しませんhow two components talk to each other

+0

に見ることができます。 'App'コンポーネントの状態に' language'があり、ルートが変更されたとき - 私は1)App'の状態が自動的に変更され、2)子供がトップレベルの 'App'コンポーネントから新しいプロップを受け取ります。 .........私が見ているように - 私は手動で状態を変更して、場所を 'App'でチェックしなければならないでしょう:( –

+0

@peshohristov OK、私は私の答えを更新しました。あなたはどういう意味ですか? – tsuz

+0

IMHOはnewLangを状態に保存する必要はありません。メソッドをレンダリングするロジックを移動してください。 'render(){const lang = this.props.location.pathname.split( '/')。shift(); ... } ' – mauron85

関連する問題