React-Router中配置的Link组件跳转不生效如何解决？

项目使用的是React Router v6版本，现有代码是参照v5版本的旧教程编写的，API不兼容直接导致路由跳转失效，具体不兼容点如下：

• v6 要求所有<Route>组件必须作为<Routes>的直接子元素，不允许在普通业务组件内单独挂载<Route>
• v6 中路由匹配后渲染的组件必须通过element属性传入，不支持将组件直接写在<Route>标签的子节点位置
• v6 嵌套路由的渲染占位使用专门的<Outlet>组件，不需要在子组件内重复编写路由匹配规则
• 旧教程中基于useMatch拼接路径的逻辑在v6中已经被相对路径自动拼接能力替代，不需要手动获取路径前缀

修改根路由文件 Index.js #

把About相关的嵌套路由统一在根路由表中配置，同时引入需要渲染的SinglePage组件：

import React from "react";
import ReactDOM from "react-dom";
import TodoContainer from "./functionBased/components/TodoContainer";
import "./functionBased/App.css";
import { HashRouter as Router, Routes, Route } from "react-router-dom";
import About from "./functionBased/pages/About";
import SinglePage from "./functionBased/pages/SinglePage";
import NotMatch from "./functionBased/pages/NotMatch";

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Routes>
        <Route exact path="/" element={<TodoContainer />} />
        <Route path="/about" element={<About />}>
          {/* 嵌套子路由自动继承父路径，最终匹配路径为 /about/:slug */}
          <Route path=":slug" element={<SinglePage />} />
        </Route>
        <Route path="*" element={<NotMatch />} />
      </Routes>
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

如果你使用的是React 18+版本，把ReactDOM.render替换为createRoot的标准写法即可，路由配置逻辑不需要改动。

修改页面组件 About.js #

移除内部多余的Route、useMatch相关代码，引入<Outlet>作为子组件渲染占位，保留正确的相对路径跳转链接：

import React from "react";
import { Link, Outlet } from "react-router-dom";

const About = () => {
  return (
    <div className="about__content">
      <ul className="about__list">
        <li>
          <Link to="about-app">About App</Link>
        </li>
        <li>
          <Link to="about-author">About Author</Link>
        </li>
      </ul>
      {/* 匹配到子路由时，SinglePage组件会渲染在Outlet的位置 */}
      <Outlet />
    </div>
  );
};

export default About;

修改完成后点击About下的两个链接，会分别跳转到/#/about/about-app和/#/about/about-author路径，页面会正常展示SinglePage组件的对应内容，不会出现跳转无响应、匹配404的问题。

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