如何在单击当前选项卡链接时更新url路径

Question

我的站点有许多页面，其中一些页面在子部分使用选项卡导航。我有一个脚本，检查url路径，检查，看看它是否存在于一个subNav数组，并选择一个给定的选项卡，如果它存在。然而，当我试图导航到另一个顶层页面时，如果不点击home链接，路径和视图都不会改变。

我如何用React Router(在顶层使用)修改我的路由来正确更新url路径并允许在页面/视图之间导航?

我现在能够更新url路径，但是现在当用户单击第二个选项卡时，它会将上次单击的选项卡添加到url，而不是清除路径并使用当前选择的选项卡。

如何在每个选项卡单击上清除useLocation的位置集，以确保单击的最新选项卡是url路径中唯一使用的选项卡?

所以它应该是:http://localhost:3000/page/tab-1，而不是http://localhost:3000/page/tab-1/tab-2，它打破了。

import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import { NavLink, useLocation } from 'react-router-dom';

function TabPanel(props) {
const { children, value, index, ...other } = props;

return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && (
<Box p={0} sx={{boxShadow: 2}}>
<>{children}</>
</Box>
)}
</div>
);
}

const MyPage = () => {
const subNav = [
"tab-1",
"tab-2",
"tab-3",
"tab-4"
]
const [value, setValue] = React.useState(0);
const urlParam = window.location.pathname.split("/")[2]
useEffect(() => {
subNav.indexOf(urlParam) >- 1 && setValue(subNav.indexOf(urlParam));
},[subNav, urlParam])
const handleChange = (event, newValue) => {
setValue(newValue);
};
const { pathname } = useLocation();
return (
<div>
<Tabs value={value} className={classes.appBar} TabIndicatorProps={{
style: { background: '#5F7D4F', height: "2px" }
}} onChange={handleChange} aria-label="brand color tabs">
{subNav.map((item, i) => 
<Tab key={i} value={i} label={`${item.replaceAll('-', ' ')}`} component={NavLink} to={pathname + "/" + item} />
)}
</Tabs>
<TabPanel value={value} index={0}>
Content of tab 1
</TabPanel>
<TabPanel value={value} index={1}>
Content of tab 2
</TabPanel>
<TabPanel value={value} index={2}>
Content of tab 3
</TabPanel>
<TabPanel value={value} index={3}>
Content of tab 4
</TabPanel>
<PageFooter/>
</div>
)
}

export default MyPage;

Answer 1

所以关键是检查路径:

const pathUpdate = item => pathname.split("/")[2] !== undefined ? item : pathname + "/" + item;

，然后在选项卡中使用该函数:

<Tab key={i} value={i} label={`${item.replaceAll('-', ' ')}`} component={NavLink} to={pathUpdate(item)} />

Answer 2

我建议在这个文件中使用react-router-dom中的Link和withRouter。然后你会想在顶层使用{ BrowserRouter as Router, Route, Switch } from 'react-router-dom'，你的路线会是这样的…/tab/:tabIndex.