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>
  );
};