如何使用 react-dom-router 处理活动路由/路由更改

Question

我有一个App顶级组件，它有一个菜单和路线。在菜单上单击我更新活动项目以反映所选路线。这是代码：const [activeItem, setActiveItem] = useState(window.location.pathname === '/' ? 'home' : getRouteName());...const handleItemClick = (e, { name }) => {  setActiveItem(name);  window.document.title = 'MyApp - ' + name.charAt(0).toUpperCase() + name.slice(1);};const MenuItem = ({name, title, link}) => (  <Menu.Item    as={Link}    to={link}    name={name}    title={title}    active={activeItem === name}    onClick={handleItemClick}  >    {title}  </Menu.Item>);...<Menu /> //iterate over items<Switch>  <Route exact path="/" component={Home} />  ...</Switch>它运行良好，直到其中一个组件重定向到另一个组件。因此，如果我转到/comp1（无论是通过单击还是直接浏览），菜单项activeItem将显示为活动状态。但是，如果我转到并添加一个按钮以导航到（使用组件或 ），则活动项目将保留在.comp1comp1comp2comp1<Link>history.push('/comp1')comp2任何想法如何触发App组件中的更改以反映路由更改，最好不需要将功能放入handleActiveItem上下文中，或将其传递给所有其他组件？

Answer 1

您可以使用 NavLink 获得相同的结果，并且它会更简单一些，因为活动项目已为您处理。

https://reactrouter.com/web/api/NavLink

<NavLink> A special version of the <Link> that will add styling attributes to the rendered element when it matches the current URL

<NavLink to="/foo">foo</NavLink>

<NavLink to="/bar">bar</NavLink>

Answer 2

找到了解决方案！

我现在正在使用useLocation提供的挂钩来react-router-dom触发更改活动项目和页面标题的效果。每次位置更改时都会触发它，无论是由用户还是内部组件更改。