React Router Dom v6 显示索引和其他子路由处于活动状态

Question

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

这是我的代码，基本上发生的是在我的导航栏中我得到了活动页面 link 标记为蓝色所以当我打开 /dashboard 时，它会以蓝色显示主页但是当我打开 /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>

Answer 1

您可以将“根”级别 link 上的 end 属性指定到 "/dashboard" 路径。

NavLink

If the end prop is used, it will ensure this component isn't matched as "active" when its descendant paths are matched.

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

React Router Dom v6 显示索引和其他子路由处于活动状态

React Router Dom v6 shows active for index as well as other subroutes

reactjs

react-router

react-router-dom