React-router 4 - NavLink，共享组件未更新-Java 学习之路

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

当我在 to 之一的播放链接之间导航时，例如从 /books 到 /plays/macbeth ，NavLink会相应地更新选项卡 . 当我浏览 between 播放时，例如从 /plays/macbeth 到 /plays/hamlet ，NavLink不会更新，原始标签（在本例中为Macbeth）仍保持活动状态 .

我怀疑问题是因为组件没有改变，NavLink中的某些东西isActive检查没有触发 . 如果我导航到不同的子链接（例如， /plays/hamlet/actI ，然后导航到 /plays/macbeth ），Macbeth选项卡将按预期标记为活动，这进一步证实了这一点 . 那么，即使Component没有改变，有没有办法强制 NavLink 更新？

2 回答

0
尝试使用 exact 道具：
```
<Route exact path="/plays/:title" component={PlayComponent} />
```
Doc：https://reacttraining.com/react-router/web/api/Route/exact-bool

UPDATE ：既然你认为's not re-rendering because it'是同一个组件，也可以试试这个：
```
<Route path="/plays/:title" component={(props) => (<PlayComponent {...props}/>) } />
```
回复于 2024-05-07T06:41:43+08:00
1
我也遇到了这样的问题 . 我已经尝试过上面提到的这两种解决方案，但都失败了 . 在我的应用程序中，有一个 <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 拥有classname active .

这个问题困扰了我很多，希望得到你的答案 . 谢谢！
回复于 2024-05-07T06:41:43+08:00

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

2 回答

相关问题