Как реализовать изменение вложенного маршрута при клике по в шапке сайта
Я пишу приложение на React и столкнулся со следующей сложностью, связанной с маршрутизацией.
В приложении есть компоненты, которые отображаются всегда и есть компоненты, которые отображаются в зависимости от маршрута:
- Шапка (Header) и подвал (Footer) отображаются всегда
- Если пользователь не авторизован (маршрут "/"), отображается компонент "Главная страница" (MainPage), если пользователь авторизован, маршрут меняется на "account/" и отображается компонент Account.
В рамках компонента Account реализована своя маршрутизация: Компонент Account включает в себя боковое меню, для управления маршрутизацией и компонент для отображения контента, содержимое которого зависит от маршрута. Пункты бокового меню реализованы с помощью Link, при нажатии на которые происходит изменение маршрута.
Эта часть успешно работает.
Проблема заключается в том, что в шапке сайта есть выпадающее меню, через которое осуществляется переход к настройкам профиля. Пункты данного меню так же реализованы в виде Link. При клике по пункту "Настройки" сталкиваюсь со следующей ситуацией - url меняется, но перерисовки компонента с контентом в Account не происходит.
Я думаю что происходит следующее:
Так выглядит маршрутизация в родительском компоненте App:
class App extends Component{
render(){
return (
<Router>
<div className="App">
<Header/>
<Route path="/" render={(props)=>this.props.testStore.username!=""? (<Redirect to={{pathname:"/account"}}/>):<MainPage {...props} exact/>
<Route path="/account" render={(props)=><Account/>}/>
<Footer/>
</div>
</Router>
);
}
}
Когда при клике по Link в компоненте Header ulr меняется на "account/setting", происходит сравнение маршрута в компоненте App, Route видит в маршруте "account" и так как нет строгого сравнения exact отрисовывает компонент Account.
Однако дальнейшего сравнения в компоненте Account почему то не происходит. Может кто нибудь подсказать мне решение данной проблемы? Как можно осуществить изменение маршрута внутри вложенного компонента, посредством клика по Link в шапке сайта?
Так выглядит маршрутизация внутри Account:
export default class Account extends Component{
render(){
return(
<Router>
<section className="account container">
<Sidebar/> /*Боковое меню через которое осуществляется навигация в рамках Account*/
<Route path="/account" render={(...props)=><Profile/>} exact/>
<Route path="/account/setting" render={(...props)=><ProfileSettings/>} exact/>
</section>
</Router>
)
}
}