React Router v6搭配Material-UI Tabs 首页独立页面链接加载异常问题

两个核心配置错误导致异常：

• 路由规则不符合预期：当前page1/page2/page3全部被配置为/demo路径下的嵌套动态路由，根路径下的/page1、/page2、/page3没有匹配的路由规则，点击首页对应链接时找不到可渲染的组件，直接出现空白。另外嵌套子路由使用了:page1这类动态参数写法，和固定路径的需求不匹配。
• Demo组件逻辑和路由机制冲突：作为嵌套路由的父级组件，没有放置<Outlet />作为子路由的渲染出口，反而通过本地state手动控制页面渲染，和路由逻辑完全脱节，即使路由匹配正确也无法正常加载内容。

1. 修正路由配置 #

放开独立页面的路由规则，和Demo路由保持平级，同时修正嵌套路由的参数写法：

<Routes>
  <Route path="/" element={<Homepage />} />
  {/* 带Tabs栏的Demo页面路由组 */}
  <Route path="/demo" element={<Demo />}>
    <Route path="page1" element={<Page1 />} />
    <Route path="page2" element={<Page2 />} />
    <Route path="page3" element={<Page3 />} />
  </Route>
  {/* 不带Tabs栏的独立页面路由 */}
  <Route path="/page1" element={<Page1 />} />
  <Route path="/page2" element={<Page2 />} />
  <Route path="/page3" element={<Page3 />} />
</Routes>

2. 重构Demo组件逻辑 #

移除手动监听pathname同步state的冗余代码，直接通过路由信息计算Tab选中状态，用<Outlet />渲染嵌套子路由内容，实现状态和路由自动同步：

import { Link, Outlet, useLocation } from 'react-router-dom';

export default function BasicTabs() {
  const location = useLocation();
  // 根据当前路径自动匹配Tab选中值，无需手动维护state
  const getActiveTab = () => {
    switch(location.pathname) {
      case '/demo/page1': return 0;
      case '/demo/page2': return 1;
      case '/demo/page3': return 2;
      default: return 0;
    }
  }
  const activeTab = getActiveTab();

  return (
    <Box sx={{ width: "100%" }}>
      <li>
        <Link to="/">Homepage</Link>
      </li>
      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
        <h1>Some text here</h1>
        <Tabs
          value={activeTab}
          aria-label="basic tabs example"
        >
          <Tab
            label="Item One"
            {...a11yProps(0)}
            to="/demo/page1"
            component={Link}
          />
          <Tab
            label="Item Two"
            {...a11yProps(1)}
            to="/demo/page2"
            component={Link}
          />
          <Tab
            label="Item Three"
            {...a11yProps(2)}
            to="/demo/page3"
            component={Link}
          />
        </Tabs>
      </Box>
      {/* 嵌套路由渲染出口，自动加载匹配的子页面 */}
      <Outlet />
    </Box>
  );
}

3. 修正首页导航拼写错误 #

首页导航中Page2、Page3的链接文本存在拼写错误，同步修正：

<li>
  The tabs are located here - <Link to="/demo">Demo</Link>
</li>
<li>
  <Link to="/page1">Page1</Link>
</li>
<li>
  <Link to="/page2">Page2</Link>
</li>
<li>
  <Link to="/page3">Page3</Link>
</li>

修改完成后：

• 点击首页的独立页面链接，会直接匹配根路径下的路由规则，仅渲染对应页面组件，不会展示Demo页的Tabs栏
• 进入Demo页面后，Tabs栏正常展示，切换标签、刷新页面都能自动同步选中状态和对应页面内容，逻辑无冲突

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