React Router Dom v6 显示索引以及其他子路由处于活动状态答案

【问题标题】：React Router Dom v6 shows active for index as well as other subroutesReact Router Dom v6 显示索引以及其他子路由处于活动状态
【发布时间】：2022-01-09 18:41:34
【问题描述】：

<Route path='/dashboard' element={<Navbar />}>
     <Route index element={<Home />} />
     <Route path='profile' element={<Profile />} />
     <Route path='wallets' element={<Wallet />} />
     <Route path='users' element={<Users />} />
</Route>

这是我的代码，基本上发生的事情是在我的导航栏中我将活动页面链接标记为蓝色因此，当我在 /dashboard 上时，它会以蓝色显示 Home 但是当我在 /dashboard/profile 上时，它会以蓝色显示家庭和个人资料

<li>
    <NavLink to=''>
      {({ isActive }) =>
         isActive ? (
               <text style={{color: blue}}>Home</text>
         ) : (                      
               <text>Home</text>
         )
      }
    </NavLink>
</li>
<li>
    <NavLink to='profile'>
    {({ isActive }) =>
         isActive ? (
               <text style={{color: blue}}>Profile</text>
         ) : (                      
               <text>Profile</text>
         )
    }
    </NavLink>
</li>

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

您可以在指向"/dashboard" 路径的“根”级链接上指定end 属性。

NavLink

如果使用end 属性，它将确保该组件不匹配当其后代路径匹配时为“活动”。

<NavLink to='' end>
  {({ isActive }) =>
     isActive ? (
           <text style={{color: blue}}>Home</text>
     ) : (                      
           <text>Home</text>
     )
  }
</NavLink>

【讨论】：