Есть ли способ проложить маршрут с вопросительным знаком?

Question

Я определяю свой маршрут

<Route path={['/test', '/test\\?foo=:id&bar=:id\\&zoo=:id']} component={Test} />

Когда я ввожу URL localhost:9000/test?foo=100&bar=100&zoo=100, он не перенаправляется на тестовый компонент.Я добавил console.log(this.props.location.search) в componentDidMount (), но он дает вывод в виде ?foo=100&bar=100&zoo=100

И он идет в мой вид страницы ошибок, который

<Route path="" component={ErrorPage} />

Я попытался удалить знак вопроса (?) Из URL-адреса и добавить символы, такие как [,], $, и URL-адрес попадает в компонент тестирования.

Есть ли способ ввода URL = localhost:9000/test?foo=100&bar=100&zoo=100 I?вместо того, чтобы перейти к компоненту ошибки, перенаправьте его на компонент Test.

Буду признателен за помощь.

Answer 1

Вы можете передать path, который содержит вопросительный знак, но вы должны проанализировать его внутри вашего компонента вместо пути.Вы должны установить (или создать свой собственный) подходящий инструмент для разбора строки запроса.Я предлагаю вам использовать query-string one.

После этого маршрут внутри файла маршрутизации или там, где вы его используете, должен выглядеть следующим образом:

<Route path="/test" component={Test} />

Компонент Test:

import React from 'react';
import queryString from 'query-string';

class Test extends React.Component {
  componentDidMount() {
    const { location: { search } } = this.props;
    const values = queryString.parse(search);
    // Use the values to whatever you want.
  }

  render() {
    {/* ... */}
  }
}

В приведенном выше примере значения будут содержать параметры строки запроса, например, если указан URL-адрес, указанный вами: localhost:9000/test?foo=100&bar=100&zoo=100 значения будут:

{
  foo: 100,
  bar: 100,
  zoo: 100
}