大概要实现的界面就是如下图, 一个可以点击的sider bar 然后右侧的页面跟着变动, 一个很常规的后台管理界面。 但是项目需求有一些界面例如登录,注册界面不需要这个sider bar。 我的想法是把这个sider bar组件放到跟router同一级的结构中
类似于
...
<div>
<SiderBar />
<Switch>
<Route path="demo" component={Demo}>
...
</Switch>
</div>
然后通过条件渲染,通过当前url来判断是否要加载siderbar, 例如
setSiderBar() {
const doNotNeedSiderUrls = [
'/login',
....
]
if (!doNotNeedSiderUrls.includes(this.props.location.pathname)) {
return <SiderBar />
}
}
我总觉得我这种实现方式不是特别的合理, 不知道有没有什么更加优雅的解决方案, 麻烦大佬们给点儿意见跟提示。