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

更新： 既然你认为它不是重新渲染，因为它是同一个组件，也试试这个：

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

Answer 2

我也遇到过这样的问题。我已经尝试过上面提到的这两种解决方案，但都失败了。 在我的应用程序中，有一个 <App> 组件，它确实：

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

而<List>渲染<Header />，<Header />渲染<Category />，<Category />渲染一系列<NavLink />，就像

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

如果我从 Home 切换到 ABC，那么结果符合我的预期：classname active 将设置为 ABC。但是，如果我从 ABC 切换到 EFG，事情会变得很糟糕，只有 ABC 拥有类名 active。

这个问题很困扰我，希望得到你的答案。谢谢！