Как сделать так, чтобы компонент не перерисовывался при навигации по страницам?

Как сделать так, чтобы компонент не перерисовывался при навигации по страницам?

В моем приложении есть главная домашняя страница, которая загружается, и есть другая страница (Page2.js), к которой я могу перейти через панель навигации, которую я реализовал. Проблема в том, что когда я перехожу к Page2.js, а затем возвращаюсь на главную страницу, он перерисовывает все компоненты на главной странице. Мне интересно, если есть способ проверить последнее имя пути и сказать, если оно равно определенному значению, то все компоненты должны оставаться одинаковыми?

Я попытался использовать метод shouldComponentUpdate в панели навигации (так как я не хочу, чтобы он изменился), и он довольно ошибочен, так как он не будет считывать prevProps.location как значение, но не определен:

 shouldComponentUpdate = (prevProps) ={amp}gt; { if (this.props.location !== prevProps.location) { return false; } } 

App.js содержит код моей маршрутизации в приложении:

 // imports here class App extends Component { render() { const {location} = this.props; return ( {amp}lt;Switch {amp}gt; {amp}lt;DefaultLayoutRoute exact path="/"{amp}gt; {amp}lt;Redirect to={HomePage}/{amp}gt; {amp}lt;/DefaultLayoutRoute{amp}gt; {amp}lt;Route exact path={SIGNOUT} render={() ={amp}gt; { auth0Client.signOut(); window.location.href = homeRedirect; return null }}{amp}gt; {amp}lt;/Route{amp}gt; {amp}lt;Route exact path={LOGIN_SUCCESS} component={Callback}/{amp}gt; {amp}lt;DefaultLayoutRoute exact path={HomePage} location={location.pathname} component={HomePage} pageName="Office Production"/{amp}gt; {amp}lt;DefaultLayoutRoute exact path={AGENTRANKING} component={AgentRankings} pageName="Agents" /{amp}gt; {amp}lt;DefaultLayoutRoute exact path={SETTINGS} component={Settings}/{amp}gt; {amp}lt;/Switch{amp}gt; ); } } export default withRouter(App); 

Ожидаемый результат: чтобы иметь возможность перейти к Page2.js, а затем вернуться на главную страницу, где все компоненты отображаются так, как было, если я не обновлю вручную

Фактические результаты: я возвращаюсь на главную страницу, и все компоненты начинают перерисовываться.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector