Обновить маршрут, который имеет состояние на основе параметров запроса, используя React Router

Question

У меня есть маршрут, который устанавливает состояние в конструкторе на основе параметров запроса. Так как React Router не имеет возможности маршрутизации на основе параметров запроса, даже если параметры запроса изменяются, React Router рассматривает его как один и тот же маршрут.

Например, React Router обрабатывает http://example.com/ и http://example.com/?page=2 как тот же маршрут. Если я перенаправляю со второй страницы на первую страницу, конструктор не запускается снова. Однако мне нужно, чтобы конструктор снова запускался, чтобы сбросить состояние.

Есть ли способ заставить React Router перезагрузить маршрут?

Вот решение, которое работает, но оно очень хаки.

function redirect(path) { 
    browserHistory.push('/fake-path'); 
    setTimeout(_ => { 
    browserHistory.replace(path); 
    }, 0); 
} 

... 


<Router history={browserHistory}> 
    <Route path="/" component={AppRoute}> 
    <IndexRoute component={HomeRoute}/> 
    ... 
    <Route path="fake-path" component={_ => null}/> 
    </Route> 
</Router>; 

Есть ли лучшее решение?

Answer 1

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

// AppRoute.js 
componentWillReceiveProps(nextProps) { 
    if (this.props.location.query.page !== nextProps.location.query.page) { 
     // handle query parameter change here 
    } 
}