useParams() 无法动态获取路径 react-router v6

Question

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/*' element={<QuoteDetail />} />
        <Route path='/quotes/:quoteId' element={<QuoteDetail />} />
      </Routes>
    </div>
  );
}

export default App;

这是我的报价详情代码

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={`${params.quoteId}/comments`}
          element={<p>Hello</p>}
        />
      </Routes>
    </Fragment>
  );
};

export default QuoteDetail;

当我使用动态路径值时，我的代码无法呈现 QuoteDetail 代码块中存在的嵌套路由组件的元素

Answer 1

如果QuoteDetail 正在呈现子路由，则在“quoteId”路由的末尾指定* 通配符以允许进一步/更深入的匹配。

function App() {
  return (
    <div>
      <Routes>
        <Route path='/' element={<Navigate to='/quotes' />} />
        <Route path='/quotes' element={<AllQuotes />} />
        <Route path='/quotes/:quoteId/*' element={<QuoteDetail />} />
      </Routes>
    </div>
  );
}

您也可以使用来自QuoteDetail 的相对匹配/链接，实际上不需要知道当前的quoteId 来创建链接并匹配更多的子路由。您可以只指定当前位置的相对路径。以"/" 开头的路径是绝对的，没有的是相对的。

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

  return (
    <Fragment>
      <h1>Quote Detail Page</h1>
      <p>{params.quoteId}</p>
      <Routes>
        <Route 
          path="comments"
          element={<p>Hello</p>}
        />
      </Routes>
    </Fragment>
  );
};