点击标签页时更新URL路径及React Router路由异常问题的解决方法

你出现路径叠加的核心问题是跳转路径使用了当前完整路径拼接：to={pathname + "/" + item}。例如当前路径为/page/tab-1时，pathname的值就是/page/tab-1，拼接新的tab参数后自然生成错误路径/page/tab-1/tab-2，同时路由配置的匹配规则也会影响跨页面跳转能力，以下是完整修复方案：

1. 修正标签跳转路径 #

不要用当前完整路径拼接，直接使用页面固定基础路径构造跳转地址即可，例如你的页面根路径是/page，直接写绝对路径：

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

如果需要适配不同的父级路径，不想写死/page，可以拆分当前路径取前两段作为基础路径：

// 放在MyPage组件内部
const { pathname } = useLocation();
const basePath = pathname.split('/').slice(0, 2).join('/');
// 跳转时使用basePath拼接
to={`${basePath}/${item}`}

2. 优化标签选中逻辑的响应性 #

不要直接用window.location.pathname获取路径，改用useLocation返回的响应式pathname，确保路径变化时自动触发选中状态更新：

const { pathname } = useLocation();
const urlParam = pathname.split("/")[2];
useEffect(() => {
  const tabIndex = subNav.indexOf(urlParam);
  if (tabIndex > -1) setValue(tabIndex);
}, [subNav, pathname]) // 把pathname加入依赖，路径变化自动触发

3. 修正顶层路由配置（解决跨页面跳转失效问题） #

需要确保顶层路由配置正确匹配所有页面路径，下面分别给出React Router v5和v6的配置示例：

React Router v5 配置：

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Home from './Home'
import MyPage from './MyPage'
import OtherTopPage from './OtherTopPage'

export default function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        {/* 匹配/page及其下的所有子路径 */}
        <Route path="/page" component={MyPage} />
        <Route path="/other-page" component={OtherTopPage} />
      </Switch>
    </Router>
  )
}

React Router v6 配置：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './Home'
import MyPage from './MyPage'
import OtherTopPage from './OtherTopPage'

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        {/* 加*匹配/page下的所有嵌套子路径 */}
        <Route path="/page/*" element={<MyPage />} />
        <Route path="/other-page" element={<OtherTopPage />} />
      </Routes>
    </Router>
  )
}

完整修改后的MyPage代码 #

import React, { useState, useEffect } from 'react';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Box from '@material-ui/core/Box';
import { NavLink, useLocation } from 'react-router-dom';
import PageFooter from './PageFooter'; // 确保引入你的页脚组件

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 classes = {}; // 确保你已声明classes样式变量，或替换为实际样式
  const subNav = [
    "tab-1",
    "tab-2",
    "tab-3",
    "tab-4"
  ]
  const [value, setValue] = useState(0);
  const { pathname } = useLocation();
  const urlParam = pathname.split("/")[2];
  const basePath = pathname.split('/').slice(0, 2).join('/');

  useEffect(() => {
    const tabIndex = subNav.indexOf(urlParam);
    if (tabIndex > -1) {
      setValue(tabIndex);
    }
  },[subNav, pathname])

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  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={`${basePath}/${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;

内容的提问来源于stack exchange，提问作者Matt