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

Question

使用 React-Router 4 时，某些以编程方式生成的 NavLink 不会始终被标记为事件状态。我的 react 前端中有一个侧边栏，看起来像这样:

<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，导航链接会更新适本地选项卡。当我在戏剧之间导航时，例如从 /plays/macbeth 到 /plays/hamlet，导航链接不会更新，原始选项卡不会更新(在本例中为麦克白)仍然活跃。

我怀疑问题是因为组件没有更改，所以 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

更新:既然您认为它不会重新渲染，因为它是相同的组件，也请尝试以下操作:

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