在新路由中管理单击项目的道具 - React 路由器 v6

Question

我有一个对象的 map。 每个 object 都是列表中的一个项目。 当我单击一个具体项目时，它会将我移动到具有该项目 id的特定路线。 如何在新路线中正确管理该具体项目的道具？

这是通往 go 的方法还是有更好的方法？

export const Router = (): ReactElement => {
  const [itemDetails, setItemDetails] = useState<Item>();
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Root />}>
          <Route
            index
            element={<ItemList setItemDetails={setItemDetails} />}
          />
          <Route
            path="/item/:itemId"
            element={<ItemDetails itemDetails={itemDetails} />}
          />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

所以基本上我在这里做的是我将 state 设置器 function 传递到存储我的映射项目的列表，所以当我点击一个具体的项目时，我将它的道具保存到 ZC1C425268E68385D1AB5074C。

然后我只是将更新后的 state 传递到应显示具体项目详细信息的新路线。

Answer 1

如果您问是否有比将某些值从ItemList推送到父 state 以传递给ItemDetails的方法，那么可以肯定，更 React/ react-router-dom方法是从ItemList提升 items 数组组件到这个父组件，并将数据作为道具或通过上下文传递给子路由。

使用道具的示例

export const Router = (): ReactElement => {
  const [items, setItems] = useState<Array<Item>>([]);

  ... logic to populate items state ...

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Root />}>
          <Route index element={<ItemList items={items} />} />
          <Route path="/item/:itemId" element={<ItemDetails items={items} />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

项目详情

const ItemDetails = ({ items }) => {
  const { itemId } = useParams();
  const item = items.find(item => String(item.id) === itemId);

  if (!item) {
    return <div>No matching item found.</div>;
  }
  return (
    ... render item out to JSX
  );
};

使用 Outlet 上下文的示例

export const Router = (): ReactElement => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Root />}>
          <Route index element={<ItemList />} />
          <Route path="/item/:itemId" element={<ItemDetails />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

根

const Root = () => {
  const [items, setItems] = useState<Array<Item>>([]);

  ... logic to populate items state ...

  return (
    ...
    <Outlet context={{ items }} />
    ...
  );
};

物品清单

const ItemList = () => {
  const { items } = useOutletContext();

  return (
    ... map items to JSX
  );
};

项目详情

const ItemDetails = () => {
  const { items } = useOutletContext();
  const { itemId } = useParams();
  const item = items.find(item => String(item.id) === itemId);

  if (!item) {
    return <div>No matching item found.</div>;
  }
  return (
    ... render item out to JSX
  );
};