React Router DOM - 在 URL 结构中只使用一个参数答案

【问题标题】：React Router DOM - Using only one param in URL StructureReact Router DOM - 在 URL 结构中只使用一个参数
【发布时间】：2023-01-21 02:04:08
【问题描述】：

我有一个电子商务应用程序，我试图在其中构建 URL，以便它只需要一个参数 -

<Route path={process.env.PUBLIC_URL + "/:value"} component={ShopProducts} />

该值可以是“西装”等类别，也可以是“西装外套”、“裤子”等子类别。

在我目前的结构中，我的路线看起来像这样：

<Route path={process.env.PUBLIC_URL + "/:category/:sub-category"} component={ShopProducts} />

在我的 ShopProducts 组件中，我将这两个 URL 参数作为一个关键字发送以过滤产品。例如，如果路径是“/suits/blazers”，在组件中，它们成为查询字符串 ?category="suits"&sub-category="blazers" 因此，它发送一个 GET 请求，使用查询在端点过滤产品。

现在，我的问题是，如果我让 Route 只接受一个参数，即子类别，我将没有类别参数来制作查询字符串。例如，如果路径是“/blazers”，则查询字符串变为： ?category=&sub-category="blazers" 因此，过滤不起作用。

这是我端点中的数据的样子：

{
"id": 1,
"name": "Suits",
"slug": "suits",
"parent": null,
"sub_category": [
    {
        "id": 5,
        "name": "Blazers",
        "slug": "blazers",
        "parent": 1,
    },
    {
        "id": 6,
        "name": "Pants",
        "slug": "pants",
        "parent": 1,
    },
]

我尝试通过使用 onClick 函数来实现这一点，该函数将父类别保存在 Redux 中，然后使用子类别进行过滤，但是，该解决方案不可扩展，如果有人试图直接访问 URL（没有 onClick），它不会工作。

如何将Route改为只取一个值，即子类别，并通过它访问类别？

【问题讨论】：

标签： javascript reactjs url react-redux react-router-dom

【解决方案1】：

您可以采用子类别参数并搜索父类别的数据并检索主类别。

const getCategory = (data, subCategory) =>
  data.find((category) =>
    category.sub_category.some(
      (subCat) => subCat.slug.toLowerCase() === subCategory.toLowerCase()
    )
  )?.slug;

const data = [
  {
    id: 1,
    name: "Suits",
    slug: "suits",
    parent: null,
    sub_category: [
      {
        id: 5,
        name: "Blazers",
        slug: "blazers",
        parent: 1
      },
      {
        id: 6,
        name: "Pants",
        slug: "pants",
        parent: 1
      }
    ]
  },
  {
    id: 2,
    name: "Costumes",
    slug: "costumes",
    parent: null,
    sub_category: [
      {
        id: 3,
        name: "Clown",
        slug: "clown",
        parent: 2
      },
      {
        id: 4,
        name: "Police",
        slug: "police",
        parent: 2
      }
    ]
  }
];

const getCategory = (data, subCategory) =>
  data.find((category) =>
    category.sub_category.some(
      (subCat) => subCat.slug.toLowerCase() === subCategory.toLowerCase()
    )
  )?.slug;

console.log("blazers", getCategory(data, "blazers")); // blazers suits
console.log("pants", getCategory(data, "pants")); // pants suits
console.log("shoes", getCategory(data, "shoes")); // shoes undefined
console.log("police", getCategory(data, "police")); // police costumes
console.log("clown", getCategory(data, "clown")); // clown costumes

现在对于给定的路线

<Route path={`${process.env.PUBLIC_URL}/:subCategory`} component={ShopProducts} />

ShopProducts组件读取subCategory路由路径参数并计算主要的category。

const ShopProducts = () => {
  const { subCategory } = useParams();
  const category = getCategory(data, subCategory);

  ...
};

【讨论】：