반응 라우터에서 동일한 구성 요소를 두 번 다시 사용

Question

나는 어떤 콘텐츠를 표시하는 MainContainer이라는 반응 클래스가 있습니다. 그것에는 많은 링크를 나열하는 자식 인 SidebarContainer이 있습니다. 내 주요 컨테이너를 렌더링하고, URL에는 PARAM 값이없는 경우 기본적으로 대체로 하나의 기본 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이 눈에 띄게 바뀌지 만 그 외에는 아무 것도 발생하지 않습니다. 다시 클릭하면 올바른 콘텐츠가 렌더링됩니다. 그러나 지정된 매개 변수를 사용하여 URL을 복사하여 붙여 넣을 때 올바른 내용을 처음으로 렌더링합니다.

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

내가 잘못 componentWillReceiveProps 수명주기 방법을 사용하고 있습니까 :

내 ReactDOM 렌더링 방법은 다음과 같은 반응 라우터의 설정을 가지고?

Answer 1

componentWillReceiveProps 내부에는 this.props 대신 nextProps를 사용하지 않아야합니까?

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

Answer 2

탐색 후 페이지를 강제로 업데이트하는 효과적인 방법은 라우터 매개 변수를 기반으로 페이지 구성 요소에 키를 할당하는 것입니다. 이렇게하면 다른 매개 변수로 같은 페이지로 이동하면 react가 이전 매개 변수를 언 마운트하고 새 매개 변수를 마운트합니다.

이 트릭을 사용하면 구성 요소의 내부 상태를 수동으로 재설정하지 않아도되고 이전 페이지에서 부실 상태라는 일부 버그를 방지 할 수 있습니다.

Answer 3

내부 상태를 사용하는 것은 이상한 일이지만 구성 요소 내부의 어느 곳에서나 this.props.slug에 직접 액세스 할 수 있습니다.

그런데 라우터에 누락 된 것이 있습니까? 브라우저 히스토리?

import {browserHistory} from 'react-router' 

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