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>

当我在到中的一个 link 之间导航时，比如从 /books 到 /plays/macbeth，NavLink 会更新标签适当。当我在之间导航时，比如从 /plays/macbeth 到 /plays/hamlet，NavLink 不会更新并且原始选项卡（在本例中为 Macbeth）保持活动状态.

我怀疑问题是由于组件未更改，NavLink isActive 检查中的某些内容未触发。如果我导航到另一个子 link——比如 /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，那么结果符合我的预期：类名 active 将设置为 ABC。但是，如果我从 ABC 切换到 EFG，事情就会变得很糟糕，只有 ABC 拥有类名 active.

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

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

React-router 4 -- NavLink with shared component not updating

javascript

reactjs

react-router

react-router-v4