React Router V6 NavLink 不显示活动

Question

尝试用 NavLink 和 react-router 替换一些旧方法，但我的代码似乎不起作用

   return (
      <div className='Selection-container'>
      <div className="Selections">
      <NavLink to="/best">
       <button  className='Best' value='best' onClick={handleSelection}>Best</button>
       </NavLink>
      <NavLink to="/hot" >
       <button  className='Hot' value='top' onClick={handleSelection}>Hot</button>
       </NavLink>
      <NavLink to="/new" >
       <button   className='New' value='new' onClick={handleSelection}>New</button>
       </NavLink>
      </div>
        {loading && <div className='Loading-main' ><img src={loadingImg} alt='loading' className='Main-loading' /></div>}
     
      <Routes>
        <Route path='/best' element={<PostMain />} />
        <Route path='/hot' element={<PostMain />} />
        <Route path='/new'  element={<PostMain />}/>
      </Routes>
      </div>
  );
}

我正在尝试在按钮内呈现不同类型的 post 似乎可以工作，它们会更改页面中的内容，更改浏览器中的路由，只是“活动”按钮在我时未激活在最热门或新页面上（最后我想在 css 中显示 active:inactive 图像作为背景，但现在我会选择显示当前活动页面的任何内容）。

Answer 1

据我了解，这是您需要的示例

<NavLink style={({ isActive }) => isActive ? {backgroundImage:'yourimg'} : {}} 
        ...
</NavLink>

您可以使用 className 代替样式

<NavLink className={({ isActive }) => isActive ? 'activeBtn' : ''} 
        ...
</NavLink>

Answer 2

是的，在 v6 中有一些变化，“end”在

之前用作“exact”和“strict”

import { NavLink } from 'react-router-dom'
<li>
  <NavLink end to="/">
    HOME
  </NavLink>
</li>

您可以使用选择器设置活动 link 的样式：

[aria-current="page"] {
    background-color: purple;
}

React Router V6 NavLink 不显示活动

React Router V6 NavLink doesn't show active

jsx

reactjs

react-router-dom