Redux route меняет путь, но не отображает новую страницу - PullRequest
Новая
       5

Redux route меняет путь, но не отображает новую страницу

0 голосов
/ 28 сентября 2018

Все работало нормально, пока я не обновил маршрут с некоторыми дополнительными значениями и требованиями (позвольте назвать их: ключ и необязательно в примере ниже).Когда я нажимаю на кнопку, чтобы перейти на новую страницу, она меняет URL-адрес пути (в браузере), но остается на той же странице ( MainPage ) с без ошибок и неперейти на NewPage или TestSite .Я включил withRouter на странице.Есть идеи, как решить эту проблему?Спасибо! 

<Router>
    <Switch>
        <Route exact path='/:Key/:optional?' render={(props) => <MainPage key={props.match.params.key} optional={props.match.params.optional} />} />
        <Route exact path='/NewPage/:Key/:optional?' render={(props) => <NewPage />} />
        <Route exact path='/TestSite' render={(props) => <TestSite/>} />
    </Switch>   
</Router>

Render () 

<Link to="/NewPage/Key"><button className="btn btn-warning">Open New Page</button></Link>
<Link to="/TestSite"><div className="btn btn-success">Open Test Page</div></Link>

1 Ответ

0 голосов
/ 28 сентября 2018

Если я правильно понимаю ситуацию, то я думаю, что решение состоит в том, чтобы изменить порядок ваших <Route /> компонентов в вашем <Switch /> следующим образом: 

<Router>
    <Switch>

        {/* Set this route as the first in the switch /*}
        <Route exact path='/NewPage/:Key/:optional?' render={(props) => <NewPage />} />

        <Route exact path='/TestSite' render={(props) => <TestSite/>} />

        {/* Set this route as last in the switch /*}
        <Route exact path='/:Key/:optional?' render={(props) => <MainPage key={props.match.params.key} optional={props.match.params.optional} />} />
    </Switch>   
</Router>

Причина в том, чтоПриоритет маршрута основан на порядке, в котором маршруты определены в коммутаторе.

Таким образом, при навигации по <Link to="/NewPage/Key"> часть маршрута NewPage будет соответствовать :Key, а часть маршрута Key будет соответствовать :optional?.При переупорядочении маршрутов, как показано, в этом случае ожидаемый компонент <NewPage /> должен отображаться для <Link to="/NewPage/Key">.

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

...