如何在 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 指南