React Router v4 - перенаправление на тот же маршрут с разными параметрами запроса

Question

Сценарий:

Существует домашняя страница, с которой при поиске пользователь перенаправляется на страницу поиска с параметром запроса (например, q = abc).Теперь, находясь на странице поиска, пользователь снова пытается найти другое значение, поэтому он снова перенаправляется на ту же страницу поиска, но с другим параметром запроса (например, q = xyz)

Проблема:

Когда я снова пытаюсь выполнить перенаправление со страницы поиска на тот же маршрут с другим параметром запроса, я получаю сообщение об ошибке «Вы пытались перенаправить на тот же маршрут, на котором сейчас находитесь».

Ожидаемый результат:

Пользователь должен быть перенаправлен на тот же маршрут еще раз с другими параметрами запроса, чтобы при нажатии кнопки назад он мог вернуться к предыдущему запросу, как этообычно было бы, если бы это не было SPA.Результат должен быть аналогичен случаю, когда я перенаправил пользователя из / search / abc в / search / xyz, используя один и тот же компонент.

Возможное решение:

При отправке поискового запроса я могу проверить, является ли он тем же маршрутом, и на основании этого я могу либо перенаправить, либо обновить состояние компонента каким-либо образом.Проблема этого решения заключается в том, что пользователь не может вернуться к предыдущему запросу, нажав кнопку «Назад» браузера.Я хочу, чтобы страница была добавлена ​​в историю.

Фрагмент кода:

Использование приведенного ниже кода для перенаправления в функции рендеринга внутри компонента поиска, который присутствует как на домашней странице, так и в поискеpage

if (this.state.isReady) {
        let queryString = "q=" + this.state.q;
        return (
            <Redirect push to={`/search/hotels?${queryString}`} />
        );
    }

Я думаю, что это обычная проблема для любого сайта, имеющего функцию поиска, поэтому должен быть элегантный способ справиться с такой ситуацией, но я не могу думать об этом.

Answer 1

Эй, вы можете использовать объектную нотацию вместо строкового литерала и передать объект местоположения, содержащий новое имя пути, которое вы хотите перенаправить на пример

const Topic = ({ location }) => (
   <Redirect to={{ ...location, pathname: '/topics?user=prolific' }} />
)

, поэтому с помощью оператора распространения вы сохраните предыдущеесвойства местоположения, а затем вы можете изменить путь к имени, которое вы хотите.

или

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

const Topic = ({ location }) => {
   const userQuery = 'user=prolific&title=The Long Night';
   const newRoute = `topics?${userQuery}`

   return <Redirect to={newRoute} />
}

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

Answer 2

Нашел решение:

Вместо использования <Redirect /> от React Router я использовал исторический api для проталкивания нового маршрута.

this.props.history.push(`/search/hotels?${queryString}`);

Я обернул свой SearchComponent внутри withRouter, который являетсяHOC, предоставленный React-Router и затем использовавший API истории.

Фрагмент кода:

import { withRouter } from 'react-router-dom';

class SearchComponent {

    // Component Code goes here

    onSubmit(){
        let queryString = "q=" + this.state.q;
        this.props.history.push(`/search/hotels?${queryString}`);
    }
}

export default withRouter(SearchComponent)