使用react router dom停止在页面中重新呈现边栏

Question

如果有任何帮助，我们将不胜感激。因此，我有一个包含页眉、边栏、页脚和Main的页面，其中边栏有静态链接，单击时会显示组件。这里的问题是点击链接，侧边栏，页眉和页脚正在重新呈现，这是不需要的。我已经在侧边栏中尝试过shouldComponentUpdate，但它不起作用。项目使用的版本："反应"："^16.12.0"，"react dom"："^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为true，它将转到AppRoute.js文件中的私有路由

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多个NavLinks，但我只包含了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只渲染一次，因此应该只有一个地方可以使用它。

不同布局的正确方式

如果您还想在没有布局(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>