小编Dee*_*tye的帖子

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

<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>
Run Code Online (Sandbox Code Playgroud)

这是我的代码,基本上发生的事情是在我的导航栏中我将活动页面链接标记为蓝色所以当我在上面时,/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>
                      
Run Code Online (Sandbox Code Playgroud)

reactjs react-router react-router-dom

12
推荐指数
1
解决办法
6896
查看次数

标签 统计

react-router ×1

react-router-dom ×1

reactjs ×1