useParams() 無法動態獲取路徑 react-router v6

海斯維亞斯

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 代碼塊中存在的嵌套路由組件的元素

德魯里斯

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