React布局的疑惑

#1

一个项目的页面的布局。我现在的做法是在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
#2

我是新手,
判断服务器是否请求到数据,没有就 跳转 到登入页面进行登入授权等

#3

设计一个/login的路由进入Login组件的。在Menu组件内部的componentWillMount判断登录与否。没有登录了就重定向到login组件所在的路由就好了

componentWillMount(){
// 判断是否登录了,没有有就重定向
let {history} = this.props
//history.push("/login")
}
<BrowserRouter>
  <Switch>
    <Route exact path="/menu" component={Menu}></Route>
    <Route exact path="/login" component={Login}></Route>
  </Switch>
</BrowserRouter>
#4

我现在肯定是判断有没有登录的呀。
我也知道通过/login去登录界面。
我现在的布局是其他的组件在content(内容里)。
如果路由跳转到/login,导致登录界面嵌套在content里。
所以想问下各位有没有什么好的方法,而不是在根组件判断是否登录。