React Router v6导航异常求助：注册链接跳转路径错误

你遇到的导航问题核心原因是Material-UI的Link组件没有和React Router的导航系统正确绑定，导致路径解析成了相对路径，而非你期望的绝对路径跳转。

具体问题点 #

看你LoginView中的这段代码：

<Link to="/register" variant="h6">
  Sign up
</Link>

这里的Link是Material-UI提供的组件，而非你导入的RouterLink。Material-UI的Link默认会渲染成普通的<a>标签，当你在/app/login页面点击它时，浏览器会把/register当作相对路径，拼接到当前路径后，最终变成/app/login/register，这就触发了404页面。

解决方法 #

你有两种简单的修复方式：

方法1：让Material-UI Link使用React Router的RouterLink作为底层组件

修改Sign up的Link代码，指定component属性为你导入的RouterLink，同时确保路径是正确的绝对路径：

// 注意这里的to路径是/app/register，对应你的路由配置
<Link component={RouterLink} to="/app/register" variant="h6">
  Sign up
</Link>

这样Material-UI的Link就会利用React Router的导航逻辑，正确解析绝对路径，跳转到/app/register。

方法2：直接使用React Router的RouterLink组件

如果你不需要Material-UI Link的样式特性，可以直接替换成RouterLink，并搭配Typography来保持样式：

<RouterLink to="/app/register" style={{ textDecoration: 'none', color: '#1976d2' }}>
  <Typography variant="h6">Sign up</Typography>
</RouterLink>

额外优化建议 #

你的路由配置中，父路由app的路径写成了'app'，建议改成'/app'（带开头的斜杠），这样在路径匹配时会更明确，避免潜在的嵌套路由匹配问题：

const routes = [
  { path: '/app', element: <DashboardLayout />, children: [
      { path: 'account', element: <AccountView /> },
      { path: 'login', element: <LoginView /> },
      { path: 'register', element: <RegisterView /> },
      // ...其他子路由
    ],
  },
  // ...其他路由
];

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