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会相应地更新标签。当我从<{1}}到/plays/macbeth之间之间导航时，NavLink不会更新，原始标签（在本例中为Macbeth）仍然有效。

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

Answer 1

尝试使用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}/>) } />

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，那么结果符合我的期望：class active将设置在ABC上。但是，如果我从ABC切换到EFG，事情会变得很糟糕，只有ABC拥有类名active。

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

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

2 个答案: