React Router Dom v6路由跳转路径重复追加拼接问题排查

核心错误原因 #

<Link>组件的to属性未使用绝对路径写法。React Router 中，不带前导斜杠/的路径会被识别为当前路由的相对子路径，跳转时直接拼接在当前路径末尾，才会出现/login/register这类异常地址。

代码中存在的所有问题 #

• 所有页面的跳转链接路径缺少根路径前缀：Home.js、Login.js、Register.js里的to="login"、to="register"都是相对路径写法，全部要改成带前导斜杠的绝对路径to="/login"、to="/register"，从站点根目录开始匹配路由，就不会出现路径拼接问题。
• App.js存在无效导入：React Router v6 版本已经移除Switch组件，路由容器统一使用Routes，导入Switch属于无效代码，还可能引发控制台报错。
• App.js根路由多余配置：React Router v6 默认采用精确路由匹配规则，不需要给根路由加exact属性。
• 三个页面组件存在无效导入：Home.js、Login.js、Register.js里导入的Router组件没有被任何代码使用，属于冗余导入，可以直接删除。

修复示例 #

修正后的Link写法（所有页面通用） #

{/* Home.js */}
<li>
  <Link to="/login">Login</Link>
</li>
<li>
  <Link to="/register">Register</Link>
</li>

{/* Login.js */}
<li>
  <Link to="/register">Register</Link>
</li>

{/* Register.js */}
<li>
  <Link to="/login">Login</Link>
</li>

修正后的App.js代码 #

import "./App.scss";
// 移除多余的Switch导入
import { Routes, Route } from "react-router-dom";

import Home from "./components/Home/Home";
import Login from "./components/Login/Login";
import Register from "./components/Register/Register";

function App() {
  return (
    <Routes>
      {/* 移除多余的exact属性 */}
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />
      <Route path="/register" element={<Register />} />
    </Routes>
  );
}

export default App;

修正后的页面组件导入部分（三个页面通用） #

import React from "react";
// 移除多余的Router导入
import { Link } from "react-router-dom";

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