Как реализовать изменение вложенного маршрута при клике по в шапке сайта

Я пишу приложение на React и столкнулся со следующей сложностью, связанной с маршрутизацией.

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

  1. Шапка (Header) и подвал (Footer) отображаются всегда
  2. Если пользователь не авторизован (маршрут "/"), отображается компонент "Главная страница" (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>
    )
}

}


Ответы (0 шт):