为什么反应路由器中的 navlink 始终处于活动状态 - Javascript

当使用React Router中的NavLink组件时，可能会遇到一个问题，即该链接始终处于活动状态，即使您已经跳转到另一个页面。

这可能是由于以下几点原因：

1. to 属性的值不正确

请确保您在NavLink组件中正确设置了to属性。to属性应该是您想要跳转到的页面的路径。

<NavLink to="/about">About</NavLink>

请注意，在这个例子中，我们将to属性设置为“/about”，这意味着当用户点击这个链接时，他们将被带到“/about”页面。

2. activeClassName 属性未正确设置

当NavLink处于活动状态时，React Router会将一个名为“active”的类添加到该链接的类列表中。为了自定义这个类名，您可以使用activeClassName属性。

请注意，在以下示例中，我们使用了自定义类名“active-link”来标记处于活动状态的NavLink链接。

<NavLink to="/about" activeClassName="active-link">About</NavLink>

3. NavLink组件的exact属性没有设置

当NavLink组件的exact属性设置为true时，它只会处于活动状态，当它的路径与当前URL完全匹配时。如果exact属性未设置，则NavLink将匹配所有包含其to属性路径的URL。

请注意，在以下示例中，我们将exact属性设置为true，这意味着当用户访问“/”页面时，我们希望Home链接处于活动状态。

<NavLink exact to="/" activeClassName="active-link">Home</NavLink>

4. location属性传递错误

有时，如果您在应用程序中手动更改URL或使用编程方式导航，可能需要向NavLink组件传递一个名为location的属性。

请注意，在以下示例中，我们使用location属性将当前URL设置为“/about”，因此NavLink将处于活动状态。

<NavLink to="/about" activeClassName="active-link" location={{pathname: '/about'}}>About</NavLink>

总的来说，如果您的NavLink始终处于活动状态，请检查上述方法，看看您是否正确设置了to、exact、activeClassName和location属性。

希望这篇文章对您有所帮助！