reactjs NavLink如何使用URL查询字符串分配活动分隔符？

wnavrhmk 于 2023-03-12 发布在 React

关注(0)|答案(1)|浏览(94)

我正在使用不同查询字符串处理NavLink列表

<ul>
    <li>
      <NavLink
        to="?type=all"
        end>
        all
      </NavLink>
    </li>
    <li>
      <NavLink
        to="?type=asdf"
        end>
        asdf
      </NavLink>
    </li>
    <li>
      <NavLink
        to="?type=1234"
        end>
        1234
      </NavLink>
    </li>
  </ul>

我想在活动链接上添加一些css，但我发现它们都是同时活动的，因为它们有相同的网址。
Differ NavLink Active for Same Link but Muliples Query Paramas Id
我在这里发现了一个类似的问题，并尝试了useLocation（）的解决方案，但它不起作用，所以我记录了props.to和location. pathname的值。

props.to: ?type=aaaaa
location.pathname: /console/products

pathname只返回URL，所以与www.example.com比较时总是返回FALSEprops.to，这样我就不能将活动的css类赋给该元素。
是react-router-dom v6有什么变化还是我弄错了？

reactjs

来源：https://stackoverflow.com/questions/75695780/how-can-navlink-assign-active-separate-with-url-query-string

1条答案

按热度按时间

v09wglhw1#

const {search} = useLocation()
const type = new URLSearchParams(search).get('type')

<NavLink
    to="?type=1234"
    // this is react-router-dom v6 way
    className={({isActive}) => (isActive && type === '1234') ? 'active' : ''}
    end
>
    1234
  </NavLink>

赞(0）回复(0）举报 2023-03-12

我来回答

reactjs NavLink如何使用URL查询字符串分配活动分隔符？

1条答案

相关问题

热门标签

最新问答