Как правильно отправить запрос в React Router - PullRequest
Новая
       35

Как правильно отправить запрос в React Router

0 голосов
/ 05 июля 2019

Прошу прощения, если этот вопрос уже задавался или не вносит вклад в сообщество, но я застрял при отправке строки запроса в URL-адресе в React Router.

Мой клиент хочет иметь дружественный URL, который должен состоять из названия категории и каталожного номера детали, т.е.

http://localhost:8000/parts/alternators-11.2824.

Прямо сейчас я перенаправляю на страницу показа детали таким образом. 

this.props.changeRoute(`/${subdomain}/parts/${category}-${partId}`)

Краткое объяснение:

  • subdomian может быть 'en' или 'de' или 'fr' в зависимости от языка
  • category - название категории, к которой относится данная часть
  • partId - идентификатор детали в БД.

Итак, я получаю этот URL:

http://localhost:8000/parts/alternators-1234

однако URL должен состоять из номера каталога, а не ID детали из БД, например:

http://localhost:8000/parts/alternators-11.2824

Это меня не устроит, потому что есть промежуточное программное обеспечение Saga, которое извлекает деталь из API, и ему нужен фактический идентификатор из БД в бэкэнде, чтобы она не находила деталь по каталожному номеру.

Запрос саги ajax выглядит так: 

export function* getPart(action) {
  const authOptions = yield call(authorizationHeader);
  const location = action.location;
  const url = location ? `${API_URL}/parts/${partIdFromUrl(location)}` : '';
  const partResponse = yield call(request, url, authOptions);
  if (!partResponse.err) {
    const response = normalize(partResponse.data.part, part);
    yield put(partLoaded(response.entities));
  } else {
    yield put(partLoadingError(partResponse.err));
  }
}

export function partIdFromUrl(location) {
  const partDataIndex = 3;
  const partIdIndex = 2;
  const pathnameArray = location.pathname.split('/');
  const partData = pathnameArray[partDataIndex].split('-');
  return partData[partIdIndex];
}

Итак, я извлекаю идентификатор детали из URL, анализируя строку.

Я не уверен, как определяется this.props.changeRoute, я не смог найти определение этой функции, поэтому я предполагаю, что она где-то определена в базовой библиотеке React Router. Я попытался передать дополнительный параметр, например, так: 

this.props.changeRoute(`/${subdomain}/parts/${category}-${partId}`, {query: {partId: partId }})

но это не сработало.

Я использую в проекте промежуточное ПО React, React Router, Redux и redux-saga. Я довольно новичок в проекте, так как меня принял кто-то другой, и я пока не совсем все понимаю.

Есть ли способ передать дополнительный параметр запроса, чтобы позже я мог совершать вызовы API по идентификатору?

...