Не удалось получить строку запроса: путь заполнен, но поиск пуст

Я использую React Router + Redux + Redux Saga. Я получаю доступ к объекту местоположения, переданному в качестве реквизита моему компоненту, где я пытаюсь получить часть строки запроса URL-адреса.

Однако параметр поиска местоположения всегда пуст. Тем не менее, имя пути заполняется следующим образом:

{pathname: "/view/energy?latitude=34.06012&longitude=-118.26997&zoom=11", search: "", hash: "", key: "wsbbq0"}

Любая помощь или совет по отладке приветствуются. Спасибо!

Версии библиотек:

"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"redux-saga": "^1.1.3"

Индекс

ReactDOM.render(
   <Provider store={store}>
      <Router>
         <Route path="/" component={App} />
         <Route path="/view/:viewId" component={App} />
      </Router>
   </Provider>,
   document.getElementById('root'));

reactjs react-router-dom
person Ricardo Mayerhofer    schedule 29.03.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

react-router-dom: match

Объект сопоставления содержит информацию о том, как сопоставлен URL-адрес. объекты соответствия содержат следующие свойства:

  • params - (объект) Пары ключ/значение, проанализированные из URL-адреса, соответствующего динамическим сегментам пути
  • isExact - (логическое значение) true, если совпал весь URL-адрес (без завершающих символов)
  • path - (строка) Шаблон пути, используемый для сопоставления. Полезно для создания вложенных s
  • url — (строка) совпадающая часть URL. Полезно для создания вложенных s

Параметры - это объект, который вы ищете. props.match.params

Если вы используете функциональный компонент, вы также можете использовать useParams ловушка, но так как вы напрямую визуализируете как маршрут, component App уже будет иметь match опору.

Согласно местоположению он должен был разделить ваш URL в

{
  pathname: "/view/energy",
  search: "?latitude=34.06012&longitude=-118.26997&zoom=11",
  hash: "",
  key: "wsbbq0"
}

но этого не произошло. (не знаю почему, придется копнуть глубже)

person Drew Reese    schedule 29.03.2020
comment
Привет, Дрю, спасибо за ответ. Похоже, что params также включает параметры URL (например, /:urlParameter/?querystring). Я заметил, что в componentDidMount и componentWillMount параметр поиска заполнен правильно, однако, когда я вызываю его из render(), это не так. Есть идеи? Спасибо. - person Ricardo Mayerhofer; 29.03.2020
comment
Да, похоже, что-то связанное с жизненным циклом компонента. Как я уже упоминал в componentWillMount или DidMount, он отлично работает. Однако в рендере он сломан. Возможно, ошибка маршрутизатора реакции. - person Ricardo Mayerhofer; 29.03.2020
comment
@RicardoMayerhofer это происходит только локально или вы можете воспроизвести это в других проектах или в онлайн-кодах и ящике? - person Drew Reese; 29.03.2020