如何使用 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触发更改活动项目和页面标题的效果。每次位置更改时都会触发它，无论是由用户还是内部组件更改。