基于查询字符串的 React Router V6 更改组件答案

【问题标题】：React Router V6 change component based on query string基于查询字符串的 React Router V6 更改组件
【发布时间】：2022-01-12 19:52:44
【问题描述】：

我尝试了几件事来匹配查询字符串并根据它显示组件但没有运气，我的代码：

  <Route path="/wp-admin/admin.php" element={<PageOne />} >
        <Route path="/wp-admin/admin.php/?id=two" element={<PageTwo />} />
        <Route path="/wp-admin/admin.php/?id=three" element={<PageThree />} />
  </Route>

我想根据查询字符串显示组件 PageTwo 和 PageThree 但它不起作用，我尝试在父 Route 中使用 :id 但它不起作用，我想我在这里缺少一些基本的东西。

【问题讨论】：

如果框架不直接支持这一点，作为一种替代方法，您可以将逻辑放在<PageOne> 本身中，从查询字符串中获取id 值并在内部有条件地显示目标组件.
@David 是的，这适用于正常情况，但我在这里使用 Outlet，所以我只需要更改页面的一部分。有什么想法吗？

标签： reactjs react-router react-router-dom

【解决方案1】：

react-router-dom 仅使用 URL 的路径部分进行路由匹配，queryString 被忽略。

您可以做的是创建一个从 queryString 读取并返回要呈现的适当组件的各种包装组件。

import { useSearchParams } from "react-router-dom";

const adminPages = {
  one: PageOne,
  two: PageTwo,
  three: PageThree,
};

const AdminPage = (props) => {
  const [searchParams, setSearchParams] = useSearchParams();

  const pageId = searchParams.get("id");

  const Page = adminPages[pageId] || adminPages["one"];
  return <Page {...props} />;
};

...

<Route path="/wp-admin/admin.php" element={<AdminPage />} />

【讨论】：