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

使用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更新，即使该组件没有更改？

最佳答案

尝试使用exact道具：

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

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

更新：
由于您认为它是同一组件，因此不会重新渲染，因此请尝试以下操作：

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

Navlink

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