React-router 4 —共享组件未更新的NavLink

Question

When using React-Router 4, certain programmatically-generated NavLinks aren't being marked as active consistently. I have a sidebar in my react frontend that looks something like this:

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

And my routing looks something like this:

<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>

When I navigate between to one of the the play links, say from /books to /plays/macbeth , the NavLink updates the tab appropriately. When I navigate between the plays, say from /plays/macbeth to /plays/hamlet , the NavLink doesn't update and the original tab (in this case, Macbeth) remains active.

I suspect the problem is that because the component is not changing, something in the NavLink isActive check isn't firing. This is further confirmed by the fact that if I navigate to a different sub-link -- say, /plays/hamlet/actI , and then to /plays/macbeth , the Macbeth tab is marked as active as expected. So, is there a way to force the NavLink to update even if the Component hasn't changed?

Answer 1

Try using the exact prop:

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

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

UPDATE : Since you think it's not re-rendering because it's the same component, also try this:

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

Answer 2

I faced such a problem too. And I have tried those two solutions mentioned above, but failed. In my application, there is a <App> component and it does:

<BrowserRouter>
    <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/list/:type" component={List} />
    </Switch>
</BrowserRouter>

and <List> renders <Header /> , <Header /> renders <Category /> , <Category /> renders a series of <NavLink /> , which is like

<NavLink exact to="/">Home</NavLink>
<NavLink exact to="/list/abc">ABC</NavLink>
<NavLink exact to="/list/efg">EFG</NavLink>

If I switch from Home to ABC then the result meets my expectation: classname active will be set on ABC . However, if I switch from ABC to EFG, things become terrible, only ABC owns classname active .

This problem troubles me a lot, wish to gain your answers. Thanks!