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

Question

I have an App top-level component, that has a menu and routes. On menu click I update the active item to reflect the selected route. Here's the code:

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>

And it works well, UNTIL one of the components redirects to another component. So if I go to /comp1 (whether by clicking or directly browsing) the activeItem will be comp1 and the comp1 menu item will look active. But if I go to comp2 and add a button to navigate to comp1 (either using a <Link> component, or history.push('/comp1') , the active item remians on comp2 .

Any ideas how to trigger a change in the App compoinent to reflect a route change, preferably without needing to put the handleActiveItem function into context, or pass it along to all other components?

Answer 1

You can use NavLink to achieve the same result and it's a bit simpler as the active item is handled for you.

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

Found a solution!

I'm now using the useLocation hook provided by react-router-dom to trigger an effect that changes the active item and the page title. It gets fired every time the location changes, regardless if by the user or an inner component.