React Router v6点击链接无响应 无法在指定容器渲染AddPet组件

问题原因及修复方案 #

核心问题出在嵌套路由的配置规则不匹配React Router v6的要求，按以下步骤修改即可：

1. 根路由配置补充通配符
   你当前的Manage组件作为嵌套路由的父组件，需要在根路由的path末尾添加*通配符，否则子路由路径无法被识别，点击Link就会无响应。
   根路由示例：

// App.jsx 根级路由配置
import { Routes, Route, BrowserRouter } from 'react-router-dom'
import Manage from './Manage/Manage'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 父级路由末尾加*，才能匹配子路由的扩展路径 */}
        <Route path="/manage/*" element={<Manage />} />
        {/* 你的其他根路由写在这里 */}
      </Routes>
    </BrowserRouter>
  )
}

2. 修改Manage组件内的路由与链接配置
   React Router v6默认采用精确匹配，已经废弃exact属性，嵌套子路由的path可以直接写相对路径，不需要补全父级路径：

import style from './Manage.module.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Routes, Route, Link} from 'react-router-dom';
import AddPet from '../AddPet/AddPet';

function Manage() {
    return (
        <div className="row d-flex">
            <aside className="col-md-2 mt-5">
                <ul className={style.ulManage}>
                    <li><Link to="addPet">Add Pet</Link></li>
                    <li><Link to="">List All Pets</Link></li>
                    <li><Link to="users">List All Users</Link></li>
                    <li><Link to="search-pet">Find Pet By Name</Link></li>
                    <li><Link to="search-user">Find User by Name</Link></li>
                </ul>
            </aside>
            <div className={style.containerManage}>
                <Routes>
                    <Route path="addPet" element={<AddPet />} />
                    {/* 后续其他子路由直接在这里追加即可，都会渲染在containerManage容器内 */}
                </Routes>
            </div>
        </div>
    );
}

export default Manage;

额外检查项

如果修改后还是无响应，确认整个应用最外层已经用BrowserRouter或HashRouter包裹，这是React Router生效的前提。

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