如何用React-Router实现Header和Sidebar

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在这里管理你的应用程序中的网址，并根据网址显示好的组件。但是，如果您将代码直接放在具有基本路由器代码的组件中，则可以管理您的loggin