リアクタ - ルータ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> 
)}} 

そして、私のルーティングは、このようなものになります：私はこのようになりますフロントエンド反応でサイドバー持っている私はプレーリンクの1つにの間を移動すると

<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}/>) } />