根据当前路径在 React Router 中设置活动链接

Question

使用 React Router 和 Material UI，我正在尝试根据当前 URL 路径设置导航项选择状态。如果用户来到一个特定的页面，它应该在侧边栏中设置相应链接的选中状态。

这是当前设置，但不确定我缺少什么属性来使用 React Router 根据 URL 路径设置活动状态

数据导航

"navigation":[
        {
            "label":"Introduction",
            "path": "/"  
        },
        {
            "label":"Page Two",
            "path": "pagetwo"
        }
]

import {BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom';

const [selectedIndex, setSelectedIndex] = useState(0);

const handleListItemClick = (event, index) => {
   setSelectedIndex(index);
};

{data && data.navigation.map((item, i) =>
      <Link key={i} to={`${item.path}`} className={classes.link}> 
        <ListItem button selected={selectedIndex === i} onClick={(event) => handleListItemClick(event, i)}>
          <ListItemText className={classes.navLink}>{item.label}</ListItemText>
        </ListItem>
      </Link>
 )}

Answer 1

如果您将每个链接都设为组件，则可以使用useRouteMatch，就像在the "custom link" example in the React Router docs 中一样。

function NavigationLink(props) {
  const match = useRouteMatch({
    to: props.path,
  });

  // update the link class to set styles appropriately depending
  // on whether active is true or false
  const classes = useStyles({ active: match != null });

  return (
    <Link to={props.path} className={classes.link}>
      <ListItem button selected={props.selected} onClick={props.onClick}>
        <ListItemText className={classes.navLink}>{props.children}</ListItemText>
      </ListItem>
    </Link>
  );
}

// In your existing component
data.navigation.map((item, i) => (
  <NavigationLink
    key={i}
    path={item.path}
    selected={selectedIndex === i}
    onClick={(event) => handleListItemClick(event, i)}
  >
    {item.label}
  </NavigationLink>
));

Answer 2

这是我为使其正常工作而设置的示例。我必须保持exact 才能正常工作。

https://stackblitz.com/edit/react-wvhugc?file=src/App.js

import React from 'react';
import './style.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  NavLink,
} from 'react-router-dom';
import ListItemText from '@mui/material/ListItemText';
import ListItem from '@mui/material/ListItem';

export default function App() {
  const navigation = [
    {
      label: 'Introduction',
      path: '/',
    },
    {
      label: 'Page Two',
      path: '/pagetwo',
    },
  ];
  return (
    <Router>
      {navigation.map((item, i) => (
        <NavLink
          exact
          activeStyle={{
            fontWeight: 'bold',
            color: 'red',
          }}
          key={i}
          to={`${item.path}`}
        >
          <ListItem button>
            <ListItemText>{item.label}</ListItemText>
          </ListItem>
        </NavLink>
      ))}
      <Switch>
        <Route exact path="/">
          <div>Home</div>
        </Route>
        <Route path="/">
          <div>Page 2</div>
        </Route>
      </Switch>
    </Router>
  );
}