Получить несколько параметров URL с помощью ловушки useParams ()

Question

Я пытаюсь передать несколько параметров в URL, используя React-Router 5.1 и хук useParams в функциональном компоненте.

Однако я сталкиваюсь с действительно странным поведением.

Я вставляю URL в клиент.

URL:

 http://localhost:3000/onboarding/eventId=5e9a173f9166f800128c04d1&groupId=5e9a173f9166f800128c04dc&userId=5e9a173f9166f800128c04da 

Путь:

<Route path = '/onboarding/:eventId?/:groupId?/:userId?' exact component = {OnboardingViewController} />

Странная вещь # 1: я должен сделать параметры необязательными, или браузер просто зависает навсегда.

Я их sh использую, используя все эти стратегии:

    var   {  eventId, groupId, userId } = useParams();
    var   {  eventId } = useParams();
    var   {  groupId } = useParams();
    var   {  userId  } = useParams();

Странная вещь # 2: К сожалению, при попытке использовать эти параметры это происходит:

{userId: undefined, eventId: "eventId=5e9a173f9166f800128c04d1&groupId=5e9a173f9166f800128c04dc&userId=5e9a173f9166f800128c04da", groupId: undefined}

Крюк просто принимает первый параметр и интерпретирует остальную часть первой.

Странная вещь # 3: Поскольку добавление этого URL-запроса параметров доступа к странице загружается очень медленно, несколько секунд.

Что я не вижу, делаю неправильно?

ОТВЕТ:

Что я делал неправильно: я использовал url / eventId = 123. Это не верно. Вам просто нужно указать ресурс в нужном месте в URL url / 1/2 / 3.

правильно:

http://localhost:3000/onboarding/5e9aaf4fc27583001190834e/5e9aaf60c275830011908361/5e9aaf4fc275830011908357

Затем вы сообщаете маршрутизатору, что эти вещи будут называться идентификатор события, идентификатор группы и идентификатор пользователя.

 <Route path = '/onboarding/:eventId/:groupId/:userId' exact component = {OnboardingViewController} />

Затем вы можете получить к ним доступ в компоненте, используя хук userPrams ().

var  { eventId,  groupId, userId } = useParams();

Спасибо всем!

Answer 1

Вы смешиваете параметры соответствия с параметрами запроса URL.

Параметры запроса URL можно получить из объекта location, используя useLocation hook.

Данный URL http://localhost:3000/onboarding/?eventId=5e9a173f9166f800128c04d1&groupId=5e9a173f9166f800128c04dc&userId=5e9a173f9166f800128c04da

{
  pathname: '/onboarding/',
  search: '?eventId=5e9a173f9166f800128c04d1&groupId=5e9a173f9166f800128c04dc&userId=5e9a173f9166f800128c04da'
}

потребуется маршрут path="/onboarding/", хотя

Вы можете использовать библиотеку обработки QueryParameter для затем преобразуйте их в объект карты.

Если бы вы могли массировать свой URL-адрес в виде: http://localhost: 3000 / onboarding / 5e9a173f9166f800128c04d1 / 5e9a173f9166f800128c04dc / 5e9a173f9166f * 10 108 810 10248 * Тогда маршрут path='/onboarding/:eventId/:groupId/:userId' может соответствовать параметрам пути, возвращаемым useParams.

const { eventId, groupId, userId } = useParams();

Answer 2

Структура вашего Маршрута и Маршрут не совпадают

Если вы хотите использовать параметры в вашем URL-адресе, будет http://localhost:3000/onboarding/5e9a173f9166f800128c04d1/5e9a173f9166f800128c04dc/5e9a173f9166f800128c04da

И ваш компонент Маршрута будет:

<Route path = '/onboarding/:eventId/:groupId/:userId' exact component = {OnboardingViewController} />

И затем вы можете использовать это в OnboardingViewController компоненте:

 var   {  eventId, groupId, userId } = useParams();
 console.log(eventId,groupId,userId)