reactjs - 使用 react-router-dom 停止页面中侧边栏的重新渲染

Question

任何帮助将不胜感激，所以我有一个带有页眉、侧边栏、页脚和主页面的页面，其中侧边栏有静态链接，单击时会显示组件。这里的问题是单击链接，侧边栏，页眉和页脚正在重新渲染，这不是必需的。我在侧边栏中尝试了 shouldComponentUpdate ，但它不起作用。
项目使用的版本:
“ react ”:“^16.12.0”，
“ react 域”:“^16.12.0”，
"react-router-dom": "^5.1.2",
我会在这里，直到这个问题得到解决，所以请随时提出任何问题

这是 myApp.js (根文件)

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 是真的，它进入 AppRoute.js 文件中的私有(private)路由

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>

现在，当我单击一个不同的链接时，它会转到仪表板布局，其中其 Prop 子项会发生更改，从而呈现整个仪表板，包括页眉、页脚、侧边栏。
编辑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 多个 NavLink，但我只包含了 2 个并且还删除了不相关的类名

Answer 1

不正确的方式
您的路线的结构类似于以下代码段，这将导致重新渲染 Dashboard每次切换路线时的组件。

<Route path="/subComponent" component={SubComponent}/>

const SubComponent = () => {
    return (
        <Dashboard>
            // Here is your content place
        </Dashboard>
    )
}

正确的方式
但是，正确的解决方案是 将路线直接放入Dashboard组件 您希望在其中呈现由布局 ( Dashboard ) 包裹的组件，如下所示:

<Dashboard>
    <DashboardMenu>
        <SideNav /> // e.g. containing links with history.push()
    </DashboardMenu>

    // here is the place where the components wrapped by the layout should be rendered, so place the routes here
    <Route path={...} component={() => <ComponentInsideDashboard />}
</Dashboard>

您应该已经呈现实际内容(动态内容，而不是静态的 Dashboard ) 仪表板内部 .由于每条路由都返回包裹在 Dashboard 中的动态组件。 , Dashboard将被渲染多次。
更简单地说:既然你想要 Dashboard要只渲染一次，您应该只在一个地方使用它。
不同布局的正确方法
如果您还想在没有布局 ( Dashboard) 或多个不同布局的情况下呈现内容，您可以简单地使用嵌套路由。

export const BaseApplicationRoutes = () => {
    return (
        <BrowserRouter>
            <Switch>
                <Route path="/dashboard1" component={<Dashboard1 />}/>
                <Route path="/dashboard2" component={<Dashboard2 />}/>
                <Route path="/noDashboard" component={<NoDashboard />}/>
            </Switch>
        </BrowserRouter>
    )
}

<Dashboard1> // Dashboard2 could also look like this
    <Dashboard1Menu>
        <SideNav /> // e.g. containing links with history.push()
    </Dashboard1Menu>

    // Routes containing dynamic content
    <Route path={...} component={() => <ComponentWithDashboard1 />}
</Dashboard1>

<NoDashboard>
    // any content or even more routes rendering content without a layout
</NoDashboard>