反応ルータで同じコンポーネントを2回再利用する

Question

反応クラスがMainContainerで、内容が表示されています。それには子供がいます。SidebarContainerにはたくさんのリンクが記載されています。私は私のメインのコンテナをレンダリングし、何のparam値がURLに存在しない場合、デフォルトでフォールバックとして1のデフォルトのIDを使用したコンテンツの最初の部分をロード：

var MainContainer = React.createClass({ 
    getInitialState: function() { 
    return { 
     selectedContent: this.props.params.slug || 1 
    }, 

    componentWillReceiveProps: function(nextProps, nextState) { 
    this.setState({ 
     selectedContent: this.props.params.slug || 1 
    }); 
    }, 
} 

SidebarContainerコンポーネントは、リンクセレクタがあります。

<Link to={content.slug}> 
    {content.title} 
</Link> 

リンクをクリックすると、ブラウザのURLが目に見えて変わりますが、何も起こりません。もう一度クリックすると、正しいコンテンツがレンダリングされます。しかし、指定されたparamでURLをコピー・ペーストすると、最初に正しい内容がレンダリングされます。

ReactDOM.render((
    <Router> 
    <Route path="/" component={MainContainer}/> 
    <Route path="/content/:slug" component={MainContainer}/> 
    </Router> 
), document.getElementById('react-app')); 

は私が間違ってcomponentWillReceivePropsライフサイクルメソッドを使用しています：

マイReactDOMはrenderメソッドは次のように反応・ルータの設定を持っていますか？

Answer 1

componentWillReceivePropsの中にthis.propsの代わりにnextPropsを使用しないでください。

this.setState({ 
     selectedContent: nextProps.params.slug || 1 
}); 

Answer 2

ナビゲーション後にページを強制的に更新する有効な方法は、ルータのパラメータに基づいてページコンポーネントにキーを割り当てることです。このようにして、別のパラメータで同じページに移動すると、反応すると前のページがアンマウントされ、新しいページがマウントされます。

このトリックを使用すると、コンポーネントの内部状態を手動でリセットする必要がなくなり、前のページからの古い状態のバグを防ぐことができます。

Answer 3

内部状態を使用するのは奇妙ですが、コンポーネントのどこでもthis.props.slugに直接アクセスできます。

ところで、あなたのルータに何かがないかもしれませんか？ browserHistory？

import {browserHistory} from 'react-router' 

<Router history={browserHistory}> 
    ... 
</Router>