Остановите повторный рендеринг боковой панели на странице с помощью response-router-dom

Question

Любая помощь приветствуется, поэтому у меня есть страница с заголовком, боковой панелью, нижним колонтитулом и главной страницей, где на боковой панели есть ссылки c, на которых при нажатии отображаются компоненты. Проблема здесь заключается в том, что при нажатии ссылки, боковая панель, верхний и нижний колонтитулы повторного рендеринга, что не требуется. Я попытался долженComponentUpdate в боковой панели, но он не будет работать. Версии, используемые в проекте: «реагировать»: «^ 16.12.0», «реагировать-дом»: «^ 16.12.0», «реагировать-маршрутизатор-дом»: «^ 5.1.2», я буду здесь пока проблема не будет решена, поэтому не стесняйтесь задавать любые вопросы

здесь myApp. js (файл root)

function App() {
  return (
    <Provider store={Store}>
        <Router history={history}>              
            <AppRoutes />
          </Router>             
    </Provider>
  );
}

теперь компонент AppRoutes имеет следующий метод

const RouteList = [
    {
        path: "/",
        component: Dashboard,
        guest: false,
        exact: true
    },
    {
        path: "/security_info",
        component: SecurityInfoPage,
        guest: false,
        exact: true
    },
]

class AppRoutes extends Component {

    componentDidMount() {
        ...here we fetch the login info from store
        isAuthenticated = true
    }   

    render() {
        ...if it has access token, it 
        return (
            <Switch>
                {RouteList.map((route, i) => (
                    route.guest === false 
                    ? <PrivateRoute isAuthenticated={isAuthenticated} key={i} {...route} /> 
                    : <AppRoute key={i} {...route} />
                    )
                )}
            </Switch>
        );
    }
}

, поскольку is_authenticated имеет значение true, он переходит к частному маршруту внутри AppRoute. js file

const PrivateRoute = ({isAuthenticated,  component: Component, ...rest }) => (
   <Route 
        {...rest} 
        render={(props) => (
            isAuthenticated === true
              ? <DashboardLayout>
                            <Component {...props}/>
                        </DashboardLayout>
              : <Redirect to='/login' />
        )} 
    />
)

он переходит к панели мониторинга, где он имеет несколько компонентов

<div className={'wrapper'}>
                <Navigation />
                <div className="page-content">
                    <Sidebar />
                    <div className="content-wrapper">
                        {children}
                        <MessageSideBar />
                        <Footer />
                    </div>
                </div>
            </div>

Теперь, когда я нажимаю на другую ссылку, она переходит к макету панели мониторинга, где изменяются дочерние элементы, отображая всю панель мониторинга, включая верхний и нижний колонтитулы, боковую панель. Редактировать 1: Вот файл боковой панели

class Sidebar extends Component {

componentDidMount = () => {
        it is requesting data from 3 api's
        this.props.dispatch(sidebarAction.sidebarDetail())
        this.props.dispatch(settingAction.getCreditAmount())
        this.props.dispatch(messageAction.getUnReadMessageCount())
    }
render(){
return(
   <ul>
    <li>
     <NavLink 
        exact={true} 
        to="/" >
        <span>Dashboard</span>
     </NavLink>
    </li>
    <li>
      <NavLink to="/security_info">
        <span>Security Information</span>
      </NavLink>
    </li>
   </ul>
)}

Хотя есть примерно 10+ ссылок, но я включил только 2, а также удалил нерелевантные имена классов