一个项目的页面的布局。我现在的做法是在App.js
里判断。
...
class App extends Component {
if(notLogin){
return(
<Login/>
)
}else {
return(
<Menu/>
)
}
}
...
class Menu extends Component{
render() {
return (
<Router>
<div>
<Layout>
<Sider
trigger={null}
collapsible
collapsed={this.state.collapsed}
width={240}
>
<div className="logo" />
<MenuList/>
</Sider>
<Layout>
<Content>
<div>
<Switch>
{
Routes.map((item,i) => {
return(<Route exact key={i} path={`${item.path}`} component={item.component}/>)
})
}
</Switch>
</div>
</Content>
</Layout>
</Layout>
</div>
</Router>
)
}
}
```
目前是这样处理的,虽然也能工作,但是感觉好low。
我所希望能达到的预期效果就是login组件能通过路由展现,但是目前的布局,如果采用路由进入login页面,会和其他组件共同展现出来。
不知道各位是怎么解决的。求新姿势呀。
### ReactRouter4