Блог

Главная - Вопросы по программированию - как создать динамический маршрут в react

как создать динамический маршрут в react

#reactjs #react-router #react-router-dom #router

Вопрос:

здравствуйте, у меня проблема с динамическим маршрутизатором, это мой код маршрутизатора

 lt;Routergt;  lt;Navbar /gt;  lt;Switchgt;  lt;Route path={`/dashboard/buyList`} component={BuyList} /gt;  lt;Route path={`/dashboard/receipt`} component={WarehouseReceipt} /gt;  lt;Route path='/dashboard/new' component={NewBuy} exact/gt;  lt;Route path='/dashboard/buyList:id' component={BuyInfo}/gt;  lt;Route path='/dashboard' component={DashboardDetail} exact/gt;  lt;Route component={NotFound} /gt;  lt;/Switchgt; lt;/Routergt;

моя проблема в том, где, как я должен установить buyList:id и определить его в своем проекте?

Комментарии:

1. Можете ли вы прояснить свой вопрос и в чем проблема? Если вы просто спрашиваете, как связать путь, просто отрисовайте Link компонент или используйте history.push «/панель мониторинга/buyList123» или аналогичный. Вы уверены, что не хотели добавлять разделитель путей к маршруту, т. Е. path='/dashboard/buyList/:id' вместо path='/dashboard/buyList:id' ?

2. он спрашивает о вложенных маршрутах

3. спасибо за вашу помощь, да, я хочу иметь такой путь, как этот список покупок:идентификатор, но я не знаю, как реагировать, чтобы понять идентификатор продукта и должен его показать?

4. Можете ли вы поделиться с нами тем, где вы привязываетесь к своим маршрутам? Если вы правильно настроили маршруты и ссылки, Router программа повторно отправит обновленный URL-адрес и отобразит соответствующий маршрут.

5. Ссылка @AshishKamble может быть из любого места в контексте маршрутизации. Как насчет того, чтобы дождаться, пока OP заявит о проблеме и включит весь соответствующий код, прежде чем мы начнем делать предположения о том, что им нужно?

Ответ №1:

вот небольшой пример того, как это работает во вложенных маршрутах,

 function BuyList () {  return (  lt;divgt;  lt;h1gt;BuyListlt;/h1gt;  lt;ulgt;  {buyList.map(({ name, id }) =gt; (  lt;li key={id}gt;  lt;Link to={`/buylist/${id}`}gt;{name}lt;/Linkgt;  lt;/ligt;  ))}  lt;/ulgt;   lt;hr /gt;   lt;Route path={`/buylist/:id`}gt;  lt;Buy /gt;  lt;/Routegt;  lt;/divgt;  ) }

с помощью реактивного крючка,

 let { path, url } = useRouteMatch();   lt;Switchgt;  lt;Route exact path={path}gt;  lt;h3gt;Please select a buy.lt;/h3gt;  lt;/Routegt;  lt;Route path={`${path}/:buyId`}gt;  lt;Buy /gt;  lt;/Routegt;  lt;/Switchgt;

и купить это,

 function Buy() {   let { buyId } = useParams();   return (  lt;divgt;  lt;h3gt;{buyId}lt;/h3gt;  lt;/divgt;  ); }
Метки: