React Router DOM — использование только одного параметра в структуре URL
У меня есть приложение для электронной коммерции, в котором я пытаюсь структурировать 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, фильтруя продукты в конечной точке с помощью запроса.
Теперь моя проблема заключается в том, что если я заставлю маршрут принимать только один параметр, то есть подкатегорию, у меня не будет параметра категории для создания строки запроса. Например, если путь «/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), он не не работает.
Как изменить маршрут, чтобы он принимал только одно значение, то есть подкатегорию, и через нее получал доступ к категории?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.info("blazers", getCategory(data, "blazers")); // blazers suits
console.info("pants", getCategory(data, "pants")); // pants suits
console.info("shoes", getCategory(data, "shoes")); // shoes undefined
console.info("police", getCategory(data, "police")); // police costumes
console.info("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);
...
};
@tav Array.prototype.find возвращает undefined, если в искомом массиве не найдены совпадающие данные. Где вы объявляете данные поиска вашей категории?
Я разобрался в чем проблема, спасибо! Это была проблема с тернарными операторами.
@tav Хорошо, рад, что теперь это работает на тебя. Здоровья и удачи!
Спасибо! Я думаю, что этот ответ сработает. Тем не менее, я столкнулся с одной небольшой проблемой при его реализации, я поставил getCategory(), и он работает, но категория отображается как неопределенная при загрузке страницы -
?category=undefined&sub-category = "blazers". Если я изменю запрос только на?sub-category = "blazers", а затем запишу в консоль getCategory(), тогда он сможет найти категорию. Как мне управлять тем, что при загрузке страницы он может найти категорию?