#reactjs #react-router #next.js #url-routing #next-router
#reactjs #реагировать-маршрутизатор #next.js #url-маршрутизация #далее -маршрутизатор
Вопрос:
Я создаю приложение для электронной коммерции в React / Next Js. Я хочу создать динамическую маршрутизацию с разными параметрами как для страницы сведений о продукте, так и для страницы категории.
например, если я нажму на категорию, то ее маршрутизация будет
https://www.mywebsite.com/my-category-page-url
Если я нажму на любой продукт из этой категории, то его маршрутизация будет
https://www.mywebsite.com/my-product-detail-page-url
Примечание: у меня уже есть живой веб-сайт с ежедневными посетителями 30 тыс. и с другим технологическим стеком, который следует той же структуре URL, поэтому я не могу изменить структуру URL.
Комментарии:
1. что вы имеете в виду
same routing? ваши ссылки должны отличаться для страницы категории и страницы сведений о продукте, верно? должна ли эта гиперссылка быть другим элементом или тем же элементом с динамическими ссылками? если да, то какое условие определяет, куда их направлять?2. У меня есть два компонента. Один предназначен для категории (список продуктов), а другой — для страницы сведений о продукте. если какой-то один щелчок
https://www.mywebsite.com/my-category-page-url, то он должен открыть компонент категории, а если какой-то один щелчокhttps://www.mywebsite.com/my-product-detail-page-url, то он должен открыть компонент продукта.3. В вашем приложении должен быть
router.jsфайл, в котором перечислены все допустимые маршруты, доступные в вашем приложении. Вам нужно зарегистрировать эти два маршрута там и указать соответствующим компонентам нужные пути.4. не уверен, какой маршрутизатор вы используете, но вы можете посмотреть здесь
5. Я справился с той же проблемой, имея файл с именем pages/[slug].js, который будет использоваться для блогов и для получения подробной информации о продукте. Путь будет example.com/first-blog-content для блога и example.com/first-product-details-product-1221 . где я различаю, является ли это страница блога или страница продукта, проверяя URL-адрес с «product-1221», поэтому я загружаю сведения о продукте, иначе я загружаю содержимое блога на основе slug. Может быть, это поможет вашему запросу.