React-router 4 - 공유 구성 요소가있는 NavLink가 업데이트되지 않습니다.

Question

React-Router 4를 사용하면 프로그래밍 방식으로 생성 된 특정 NavLink가 지속적으로 활성 상태로 표시되지 않습니다. 내에서 사이드를하는 것은이 같은 모양의 프론트 엔드 반응 :

<NavLink to="/">Home</NavLink> 
<NavLink to="/books">Books</NavLink> 
<NavLink to="/poems">Poems</NavLink> 
{['hamlet', 'macbeth'].map(play => (
    <NavLink to={`/plays/${play}` key={`play-${play}`}}>{play}</NavLink> 
)}} 

을 그리고 내 라우팅과 같은 :

나는 플레이 링크 하나에 사이를 이동

<Switch> 
    <Route path="/" component={HomePageComponent} exact /> 
    <Route path="/books" component={BooksComponent} /> 
    <Route path="/poems" component={PoemsComponent} /> 
    <Route path="/plays/:title" component={PlayComponent} /> 
    <Route path="/plays/:title/:act" component={ActComponent} /> 
</Switch> 

, /books에서 /plays/macbeth으로 변경하면 NavLink가 탭을 적절하게 업데이트합니다. 을 사이에서 탐색 할 때 /plays/macbeth에서 /plays/hamlet으로 이동하면 NavLink가 업데이트되지 않고 원래 탭 (이 경우 Macbeth)이 활성 상태로 유지됩니다.

구성 요소가 변경되지 않아서 NavLink isActive 검사의 항목이 실행되지 않는다고 생각됩니다. 이것은 다른 하위 링크 (예 : /plays/hamlet/actI)로 이동 한 다음 /plays/macbeth으로 이동하면 Macbeth 탭이 예상대로 활성화 됨으로 표시됩니다. 따라서 구성 요소가 변경되지 않은 경우에도 NavLink을 강제로 업데이트하는 방법이 있습니까?

Answer 1

exact 소품을 사용해보십시오 :

<Route exact path="/plays/:title" component={PlayComponent} /> 

문서 : https://reacttraining.com/react-router/web/api/Route/exact-bool

UPDATE : 당신이이 같은 구성 요소를 다시 렌더링입니다 아니기 때문에 생각하기 때문에 는,이 시도 :

<Route path="/plays/:title" component={(props) => (<PlayComponent {...props}/>) } />