URL変更時に私のコンポーネントを再レンダリングする方法を教えてください

Question

サンプルコンポーネントをフェッチする2つのリンクがありますが、いずれか1つをクリックするとロードされ、別のコンポーネントをクリックするとレンダリングされませんURLのみが変更されます。両方のリンククリックでコンポーネントを再レンダリングしたいと思います。それを行う方法はありますか？

Answer 1

私は反応プロジェクトに取り組んでいたときに、いつか同じような問題に直面していました。

コンポーネントにcomponentWillReceiveProps機能を使用する必要があります。

componentWillReceiveProps(nextProps){ 
    //call your api and update state with new props 
    } 

componentDidMount()が実行されるwww.example.com/content/a URLを呼び出すことによって、初めてそれがより明確にあなたのコンポーネントの負荷にします。

他のリンクをクリックすると、www.example.com/content/bと同じコンポーネントが呼び出されますが、今回は小道具が変更され、componentWillReceiveProps(nextProps)の下にあるこの新しい小道具にアクセスすることができ、apiを呼び出して新しいデータを取得できます。

今、あなたは一般的な関数が_initializeComponentを（言う）とcomponentDidMount（）とcomponentWillReceiveProps（）から呼び出す保つことができる

次のようなものになりますあなたのルータ： - あなたの今そう

ReactDOM.render((
    <Router history={browserHistory}> 
     <Route path="/content" component={app}> 
     <IndexRoute component={home}/> 
     <Route path="/content/:slug" component={component_name} /> 
     </Route> 
    </Router> 
), document.getElementById('app')); 

をwww.example.com/content/aを呼び出し、をスラッグとみなします。そのコンポーネント内でwww.example.com/content/bを呼び出した場合、bはslugとみなされ、componentWillReceivePropsのnextPropsパラメータとして使用できます。

希望すると助かります！