react-router v6 useParams无法动态获取路径、嵌套路由不渲染问题

AI 小北

2026-9-24

问题根因

路由配置逻辑冲突：App组件中同时声明了/quotes/*通配符路由和/quotes/:quoteId动态路由，且通配符路由顺序在前，所有/quotes开头的子路径会优先命中无:quoteId参数定义的通配符路由，直接导致useParams()无法读取到参数值
嵌套路由路径规则使用错误：react-router v6 组件内部的嵌套路由默认基于父路由路径做相对匹配，不需要手动拼接动态参数，原写法拼接的路径不符合相对路径规则，导致子路由无法命中

修复代码

App 组件修改后代码

import { Route, Routes, Navigate } from "react-router-dom";
import AllQuotes from './pages/AllQuotes';
import QuoteDetail from './pages/QuoteDetail';

function App() {
  return (
    <div>
      <Routes>
        <Route path='/' element={<Navigate to='/quotes' />} />
        <Route path='/quotes' element={<AllQuotes />} />
        {/* 合并重复路由，末尾加*支持组件内部嵌套路由匹配 */}
        <Route path='/quotes/:quoteId/*' element={<QuoteDetail />} />
      </Routes>
    </div>
  );
}

export default App;

QuoteDetail 组件修改后代码

import { Fragment } from "react";
import { useParams } from "react-router";
import { Routes, Route } from "react-router-dom";
import Comments from "../components/comments/Comments";

const QuoteDetail = () => {
  const params = useParams();

  console.log(params.quoteId); // 可正常获取动态参数

  return (
    <Fragment>
      <h1>Quote Detail Page</h1>
      <p>{params.quoteId}</p>
      <Routes>
        {/* 直接写相对路径即可，自动继承父路由的动态参数 */}
        <Route 
          path="comments"
          element={<p>Hello</p>}
        />
      </Routes>
    </Fragment>
  );
};

export default QuoteDetail;