Проблема с маршрутизацией в React, когда пользователь напрямую нажимает на URL, для которого требуется идентификатор из другого компонента.

Question

У меня есть проблема, связанная с маршрутизацией.Эта кнопка появляется на экране, которая появляется только в том случае, если пользователь прошел аутентификацию, и поэтому это частный маршрут "/home/coupons".

Когда пользователь нажимает на любой из купонов, я указал пользователю на

http://localhost:3000/coupons?id=6

Используя этот props.history:

        this.props.history.push({
                 pathname: '/coupons',
                 search: '?id='+id,

           })

Я сделал маршрутизацию для этого в моем App.js:

<Route path="/coupons" component={CouponsRedeem}/>

Компонент CouponsRedeem нуждается вid из Компонента, куда направляется пользователь, когда он нажимает /home/coupons.

Меня беспокоит то, что, если пользователь напрямую переходит на маршрут /coupons без перехода к /home/coupons, весь веб-приложение прерывается, так как мы неничего не получить, получить что-либо в this.props.location.

Как сделать так, чтобы такие вещи не происходили?

Правильно ли выполнен мой маршрут?

Любойпредложения приветствуются.Если ему не хватает информации, я добавлю больше фрагментов кода.Я использую реагирующий маршрутизатор.

Answer 1

Решение вашей проблемы довольно простое.Либо у вас есть значение по умолчанию, которое вы используете, когда пользователь не переходил с home/coupons на coupons, поскольку history.location.search ничего не имеет, либо вы переконфигурируете свой Маршрут, чтобы использовать параметр Маршрутизатор, где вместо того, чтобы запрашивать вашукажите свой маршрут как

<Route
   exact
   path="/coupons/:id"
   component={Coupon.Show}
/>

и используйте его как

 this.props.history.push({
      pathname: `/coupons/${id}`,
 })

или, если купон не получен, вы можете перенаправить пользователя на маршрут home/coupons

Answer 2

Глядя на вашу реализацию, я бы предположил, что вы используете React-router или reach-router?

Если это так, то, по моему опыту, я использую реквизиты маршрута, чтобы указать, что следует ожидать ID.

Обычно я устанавливаю маршрут для индекса и маршрут для отображения объекта имаршрут по умолчанию для отсутствия совпадений (например, 404), например:

 <Route
   exact
   path="/coupons"
   component={Coupon.Index}
 />
<Route
   exact
   path="/coupons/:id"
   component={Coupon.Show}
/>
<Route component={NoMatch} />

Указание «точного» пропуска гарантирует, что он будет отображать этот компонент только при правильном совпадении пути, поэтому, если выЕсли вам не нужен индексный маршрут, вы можете полностью его пропустить, и когда вы перейдете к нему, он обратится к компоненту NoMatch

Приведенный мной пример изменил бы его внешний вид в адресной строке для более RESTful-вида.Подходите так, вместо

http://localhost:3000/coupons?id=6 это будет http://localhost:3000/coupons/6

В компоненте show вы можете получить доступ к значению prop по имени, которое вы задаете после двоеточия ":id "в вашем компоненте Show, используя реквизиты, предоставленные маршрутизатором следующим образом:

let {id} = this.props.match.params;

Надеюсь, это поможет