如何在 react.js 中打開表格行 select 的詳細視圖？

Question

我有一個多行表，當我 select 一行時，我想顯示有關所選項目的詳細信息。

我使用 react-router-dom v6 和 MUI 的材料表組件。 下面是一個原型：

我利用路由在菜單項單擊時切換內容。 接下來是打開詳細視圖，但我不確定要使用什么模式。 我正在考慮使用路由，例如嵌套路由，但我不知道如何將選定的 object 傳遞給詳細顯示 object 的詳細信息視圖。 當然有多種方法可以做到這一點，但不知道最佳實踐是什么。

那么實現這一目標的最佳實踐是什么以及如何實現呢？

更新

我可以像下面的代碼片段一樣解決我的問題。 它有效，但我不太喜歡這種解決方案。

const App = () => {
  const [activeRow, setActiveRow] = useState({});
  return (
    <StrictMode>
      <Table setActiveRow={setActiveRow} />
      <Userdetails activeRow={activeRow} />
    </StrictMode>
  );
};

Answer 1

最好的方法是使用帶有動態路徑的useParams()

一、創建動態路由路徑

示例代碼

<Route path="invoices" element={<Invoices />}>
      <Route path=":invoiceId" element={<Invoice />} />
</Route>

請注意：

• 我們剛剛創建了一個匹配 URL 的路由，例如“/invoices/2005”和
  “/invoices/1998”。 路徑的:invoiceId 部分是“URL 參數”，
  這意味着只要模式相同，它就可以匹配任何值

現在您可以在<Invoice>中以 invoiceID 為例

let params = useParams();
return <h2>Invoice: {params.invoiceId}</h2>;

有關更多詳細信息，您可以遵循React Router V6 指南