Программная настройка параметров маршрута в React-Router V4 заканчивается «Страница не найдена»

Question

Я пытаюсь установить параметры маршрута программно из функции в компоненте, например:

this.props.history.push({
    pathname: '/SupportSectionReports',
    search: '?reportType=0'
    });

А вот как я обработал маршрут в файле роутера (скажем, router.js):

<Switch>
    <Route exact path="/" component={Login} />        
    <Route  path="/home" component={Home} />   
    <Route path="/SupportSectionReports/:reportType" component={Home} /> 
</Switch>

Вот как я добавил маршрут в мой файл роутера, так что в основном я ожидаю, что он загрузит мой компонент Home, когда путь '/ SupportSectionReports? reportType = 0', но вместо этого я получаю это сообщение, которое вы можете увидеть из рисунка ниже (а компонент Home не загружается в конечном счете):

страница не найдена сообщение

Что мне не хватает? Я неправильно устанавливаю параметры маршрута? Каков будет правильный подход?

Answer 1

Если вы используете обозначение столбца в пути маршрута, то вы должны просто передать значение этого именованного параметра при нажатии:

this.props.history.push({
  pathname: '/SupportSectionReports/0'
});

Answer 2

У вас есть несоответствие маршрута, потому что ваше правило содержит переменную пути, но вы предоставляете только поисковый запрос:

<Route path="/SupportSectionReports/:reportType" component={Home} />

1) Необходимо указать переменную пути к маршрутизатору:

this.props.history.push({
    pathname: `/SupportSectionReports/0`
});

2) Или просто удалите переменную пути из вашего маршрута:

<Route path="/SupportSectionReports" component={Home} /> 

А в компоненте Home вы можете получить параметры запроса из поиска маршрутизатора.

Или укажите переменную пути