时间戳

首页 > 解决方案 > React：对不同的路线使用不同的布局

reactjs - React：对不同的路线使用不同的布局

问题描述

我遇到了一个有点奇怪的问题，尝试将我的组件拆分为使用两种不同的布局。我有 2 个布局：我PublicLayout的路线定义如下：LayoutApp.js

render() {
    return (
      <ApolloProvider client={client}>
        <Layout>
          <Route path="/articles" component={ArticlesIndex} exact={true} />
          <Route
             path="/articles/create"
             component={ArticlesCreate}
             exact={true}
          />
          <Route
            path="/articles/edit/:id"
            component={ArticlesEdit}
            exact={true}
          />
        </Layout>
        <PublicLayout>
          <Route exact path="/" component={Home} exact={true} />
          <Route 
          path="/articles/view/:id"
          component={ArticlesView}
          exact={true}
          />
        </PublicLayout>
      </ApolloProvider>
     );
   }

这是Layout看起来的样子：

<div className="container">
    <Grid fluid>
      <Row>
        <Col sm={12}>
          {this.props.children}
        </Col>
      </Row>
    </Grid>
  </div>

我在标签内的所有路由/组件都PublicLayout按预期呈现和运行。但是，使用我的组件的所有路由/组件Layout都按预期呈现，然后PublicLayout在它们下方呈现。我猜 PublicLayout这些页面中包含它，因为它在该部分之后出现没有限定条件Layout。我怎样才能克服这个问题，只PublicLayout在它包含的路线上渲染？

感谢所有帮助。

更新：我已经通过使用以下方法解决了我的问题，这使我可以在每条路线的基础上任意定义每条路线的布局：

function renderWithLayout(Component, Layout, props) {
  return <Layout><Component {...props}/></Layout>
}


export default class App extends Component {
  displayName = App.name;

  render() {
    return (
      <ApolloProvider client={client}>
          <Route 
            path="/articles" 
            render={(props) => renderWithLayout(ArticlesIndex, Layout, props)} 
            exact={true} 
            />
          <Route
             path="/articles/create"
             render={(props) => renderWithLayout(ArticlesCreate, Layout, props)}
             exact={true}
          />
          <Route
            path="/articles/edit/:id"
            render={(props) => renderWithLayout(ArticlesEdit, Layout, props)}
            exact={true}
          />
          <Route 
            path="/" 
            render={(props) => renderWithLayout(Home, PublicLayout, props)} 
            exact={true} 
            />
          <Route 
              path="/articles/view/:id"
              render={(props) => renderWithLayout(ArticlesView, PublicLayout, props)}
              exact={true}
              />
      </ApolloProvider>
     );
   }
}

标签： reactjs

解决方案

使用条件渲染。让我们假设loggedIn您使用它来跟踪用户是否已通过身份验证。

render() {
    return {
      <ApolloProvider client={client}>
        { loggedIn ? (
        <Layout>
          <Route path="/articles" component={ArticlesIndex} exact={true} />
          <Route
             path="/articles/create"
             component={ArticlesCreate}
             exact={true}
          />
          <Route
            path="/articles/edit/:id"
            component={ArticlesEdit}
            exact={true}
          />
        </Layout>
        ) : (
        <PublicLayout>
          <Route exact path="/" component={Home} exact={true} />
          <Route 
          path="/articles/view/:id"
          component={ArticlesView}
          exact={true}
          />
        </PublicLayout>
       )}
      </ApolloProvider>
     );
   }

对于其他示例和解决方案https://reactjs.org/docs/conditional-rendering.html

推荐阅读