react-router-bootstrap で LinkContainers が2カ所以上 Active にするのをなんとかしたいな

困った

サイドメニューに設定したLinkContainerとは別に、ヘッダロゴにもトップへのリンクをつけようとしたんだけど、いざロゴをクリックしたらサイドメニューのActiveが消えずに、事前に表示していた場所とトップの2カ所がアクティブになってしまう

せいかい

Issueを読もう

export const MyMenu = () => {
  const {pathname} = useLocation() // previously imported from 'react-router-dom'
  return (
    <ListGroup key={pathname}>
      <LinkContainer exact to="/path/to/first"><ListGroup.Item action active={false}>First Item</ListGroup.Item></LinkContainer>
      <LinkContainer exact to="/path/to/second"><ListGroup.Item action active={false}>Second Item</ListGroup.Item></LinkContainer>
      <LinkContainer exact to="/path/to/third"><ListGroup.Item action active={false}>Third Item</ListGroup.Item></LinkContainer>
    </ListGroup>
  );
};

パスが変わった時点で再度レンダリングすればきれいになるよ、ということらしい

目から鱗