Material-UI ListItem作Link跳转时URL变更但对应组件未渲染的路由异常

核心故障点定位 #

• PageList.jsx 中引用了Link组件但未完成导入
  代码内ListItem通过component={Link}绑定路由跳转逻辑，但文件顶部没有从react-router-dom引入Link的语句，运行时Link为未定义变量，ListItem无法正确识别传入的自定义组件，会退化为原生<a>标签渲染。原生a标签不识别React Router的to属性，点击时会触发浏览器默认全页跳转，因无有效href值，最终会落到根路径。
• routes.js 中兜底重定向路由写法错误
  兜底路由内的<Redirect>组件额外传入了无效的component属性，Redirect仅负责路由地址的重定向逻辑，挂载额外的页面组件会打断正常的路由匹配流程，导致URL更新后页面组件无法正常渲染。
• 路由状态不同步的附带触发因素
  TopNav.jsx 中站点标题使用component="a" href="/"的写法，点击时会触发浏览器全页刷新，打乱React Router内部的状态监听，加剧路由跳转异常的表现。

逐文件修复方案 #

1. 修正PageList.jsx的组件导入
   在文件顶部补充路由Link的导入语句：

   import { Link } from "react-router-dom";
   

   修正PageItem内的ListItem渲染逻辑，确保路由路径正确绑定：

   <ListItem button component={Link} to={route}>
     <ListItemIcon className={classes.icon}>{icon}</ListItemIcon>
     <ListItemText primary={label} />
   </ListItem>
   

2. 修正routes.js的兜底路由配置
   移除<Redirect>组件上无效的component属性，保留纯重定向逻辑：

   <Route path="*">
     <Redirect to={PAGE_ROUTES[HOME]} />
   </Route>
   

3. 修正TopNav.jsx的标题跳转逻辑
   将原本的原生a标签替换为路由Link组件，避免全页刷新打断路由状态：

   // 先补充Link导入
   import { Link } from "react-router-dom";
   // 替换原有的Typography渲染
   <Typography component={Link} to={PAGE_ROUTES[HOME]} className={classes.title}>
     Amber+
   </Typography>
   

适配性提示 #

如果项目使用React Router v6及以上版本，原有基于v5的createBrowserHistory、Switch、Redirect写法已被废弃，需要替换为v6对应的BrowserRouter、Routes、Navigate写法，避免版本兼容带来的路由异常。

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