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

Question

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

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

data.navigation

"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

下面是我设置的示例，以获得此工作。我必须保持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>
);
}

Answer 2

如果你让每个链接都是一个组件，你可以像在"自定义链接"中那样使用useRouteMatch

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>
));