不同的NavLink活动相同的链接，但多个查询参数Id

Question

假设我有一个id列表数组

const items = [
{ id: 1, text='A' },
{ id: 2, text='B' },
{ id: 3, text='C' }
]

这是导航组件。

export const NavigationItem = (props) =>
<div className={classes.NavigationItem}>
<NavLink
style={style['normal']}
to={props.link}
exact={props.exact}
activeClassName={classes.active}
>{props.children}</NavLink>
</div>

这里我使用所有已创建的导航项。我使用Query参数作为id。当我渲染所有导航项时，它显示所有的导航项都是活动的。但是我想把它显示为我点击的活动链接。

items.map((item, index) => (
<NavigationItem
key={index}
link={`/my-tasks?info_id=${item.id}`}
text={item.text}
/>
))

我该怎么做?

Answer 1

您可以使用useLocation钩子

import {  useLocation } from "react-router-dom";
const NavigationItem = (props) => {
let location = useLocation();
return (
<div className={classes.NavigationItem}>
<NavLink
style={style['normal']}
to={props.link}
exact={props.exact}
className={`nav-link ${location.pathname === ${props.link}? "active":""}`}>
{props.children}
</NavLink>
</div>
);
};
export default NavigationItem;