如何使用React-Router实现页眉和侧边栏

Question

我是React Router的新手，我想实现以下功能：

// if the user is connected 
<div>
   <header/>
   <sidebar/>
   <content/>
   <footer/>
</div>
// else
<login/>

我正在使用React-Router v4。 我怎样才能做到这一点？

Answer 1

您应该在主要组件中执行此操作，然后直接在render函数中创建if / else条件。

render(){

   if (this.state.logged === true{
        <YOUR CONTENT WITH SIDEBAR...>
   }else{
        <LoginComponent>
   }
}

因此，只需更改主要组件的状态即可访问所需的组件。

React routeur在这里管理您在应用程序中的网址，并根据网址显示良好的组件。 但是，如果您将代码与基本路由器代码直接放在组件中，则可以管理登录