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} />的{{1}}包裹在网格周围并添加PrivateRoute，但这会破坏我的应用程序，当我尝试访问私有路由时，应用程序只是挂起，没有错误在终端中只是挂起...

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

我的问题是询问Header组件，但是对于私有/公共路由，我也可能会有不同的Footer。

Answer 1

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

具有一个将呈现公共HeaderContainer或私有PrivateHeaderContainer的组件。

Header.js

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

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

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

1 个答案:

Header.js

App.js