Reactjs React路由器-专用和公用路由的不同标头

我试图以这样一种方式组织我的路线：所有公共路线都将有一个公共头组件，而私有路线将有一个私有头组件

按照我目前的方法，

HeaderContainer

在所有路线上都可见，我想将其分为两部分

PublicHeaderContainer

和

PrivateHeaderContainer

我的App.js如下所示：

class App extends React.Component {
  render() {
    return (
      <Fragment>
        <Router>
          <div>

            <Grid centered>
              <Grid.Column computer={12} mobile={15} tablet={12}>
                <HeaderContainer/>

                <Segment>
                  <Switch>
                    <Route path="/welcome" component={LandingPage}/>
                    <PrivateRoute path="/home" component={BodyComponent}/>
                    <Route path="/sign-up" component={SignUp}/>
                    <Route path="/sign-in" component={SignIn}/>
                    <Route path="/#/:itemId" component={ItemView}/>

                    {/*order matters this should be the last route*/}
                    <Route path="/" component={LandingPage}/>
                  </Switch>
                </Segment>
              </Grid.Column>
            </Grid>

            <FooterContainer/>
          </div>
        </Router>
      </Fragment>
    );
  }
}

export default App;

export const PrivateRoute = ({component: Component, ...rest}) => (
  <Route {...rest} render={props => {

    //if (!isUserLogged()) {
    if (false) {
      // not logged in so redirect to login page with the return url
      return <Redirect to={{pathname: '/sign-in', state: {from: props.location}}}/>
    }

    // authorised so return component
    return <Component {...props} />
  }}/>
)

我尝试将

中的

环绕在一个网格中，并添加

PrivateHeaderContainer

，但这破坏了我的应用程序，当我尝试访问私有路由时，应用程序只是挂起，终端中没有错误只是挂起

我不知道一般的方法是什么，人们如何组织他们的组件以使其工作

---

我的问题是关于页眉组件的问题，但我可能也会对私有/公共路由使用不同的页脚。

您不能有效地对私有路由使用相同的逻辑来确定要显示的页眉吗

具有一个组件，该组件将呈现公共

标题容器

或私有

标题容器

Header.js

const头=（）=>(
如果（isUserLogged（））{
返回
}否则{
//未登录，因此显示公共
返回
}
}}/>
)
导出默认标题

App.js

类应用程序扩展了React.Component{
render（）{
返回(
{/*顺序问题这应该是最后一条路线*/}
);

我让你得到了之前的答案，这一个更好！哦，真的吗？哈哈，我真的没想到前面的答案会奏效，但这一个更简单。@AntonBelev

const Header = () => (
    if (isUserLogged()) {
       return <PrivateHeaderContainer/>
    } else {
      // not logged in so display public
      return <HeaderContainer/>
    }
  }}/>
)
export default Header

class App extends React.Component {
  render() {
    return (
      <Fragment>
        <Router>
          <div>
        <Grid centered>
          <Grid.Column computer={12} mobile={15} tablet={12}>
            <Header/>
            <Segment>
              <Switch>
                <Route path="/welcome" component={LandingPage}/>
                <PrivateRoute path="/home" component={BodyComponent}/>
                <Route path="/sign-up" component={SignUp}/>
                <Route path="/sign-in" component={SignIn}/>
                <Route path="/#/:itemId" component={ItemView}/>

                {/*order matters this should be the last route*/}
                <Route path="/" component={LandingPage}/>
              </Switch>
            </Segment>
          </Grid.Column>
        </Grid>

        <FooterContainer/>
      </div>
    </Router>
  </Fragment>
);