React Router - 私有和公共路由的不同标头

Question

我正在尝试以这样一种方式组织我的路由，即所有公共路由都将具有公共标头组件，而私有路由将具有私有标头组件。

使用我目前的方法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;

该PrivateRoute定义是这样的：

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} />
  }}/>
)

我尝试将 包裹<Component {...props} />在PrivateRouteGrid 周围并添加 ，PrivateHeaderContainer但这会破坏我的应用程序，当我尝试访问私有路由时，应用程序只是挂起，终端中没有错误只是挂起......

我不确定人们如何组织他们的组件以使其工作的一般方法是什么？

我的问题是询问 Header 组件，但我也可以为 Private/Public 路由使用不同的页脚。

Answer 1

您不能有效地为您的私有路由使用相同的逻辑来确定要显示的标题。

有一个组件可以呈现 publicHeaderContainer或 private PrivateHeaderContainer。

头文件.js

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

应用程序.js

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>
);