React Router中NavLink的activeStyle失效，显示[object object]求助

问题原因 #

你使用的是React Router v6版本，该版本已经移除了activeStyle属性。原代码中的activeStyle会被当作普通DOM属性处理，对象转成字符串后就显示为[object object]，导致样式不生效且出现异常文本。

解决方案 #

React Router v6中，NavLink的激活样式需要通过style或className的回调函数实现，根据isActive状态动态设置：

方式1：使用style回调直接定义样式 #

修改NavLink代码如下：

<NavLink 
  to="/" 
  style={({ isActive }) => ({ 
    backgroundColor: isActive ? "white" : undefined 
  })}
>Home</NavLink>

<NavLink 
  to="/Contact" 
  style={({ isActive }) => ({ 
    backgroundColor: isActive ? "white" : undefined 
  })}
>Contact</NavLink>

方式2：使用className回调结合CSS类（推荐，更易维护） #

先在CSS中定义样式类：

.nav-link {
  /* 导航链接默认样式 */
}
.nav-link.active {
  background-color: white;
}

再修改NavLink组件：

<NavLink 
  to="/" 
  className={({ isActive }) => isActive ? "nav-link active" : "nav-link"}
>Home</NavLink>

<NavLink 
  to="/Contact" 
  className={({ isActive }) => isActive ? "nav-link active" : "nav-link"}
>Contact</NavLink>

另外，React Router v6中<Route>的exact属性已被移除（Route默认就是精确匹配），可以删掉代码中的exact：

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/Contact" element={<Contact />} />
</Routes>

内容的提问来源于stack exchange，提问作者EBDS