如何在我的布局组件之外呈现组件（主页）？答案

【问题标题】：How to render component (home page) outside my Layout component?如何在我的布局组件之外呈现组件（主页）？
【发布时间】：2019-10-09 07:03:21
【问题描述】：

我有一个由标题和左侧导航组成的布局组件。我正在使用反应路由器 dom 在布局中呈现我的路线。这很好用。但是我需要在我的布局之外渲染一个 LandingPage 组件，我不知道如何正确地做到这一点。

查看我的 App.js 文件中的代码。

const App = () => {
  let routes = (
    <Switch>
      <Route exact path="/" component={ LandingPage } />
      <Route path="/path1" component={ PathOne } />
      <Route path="/path2" component={ PathTwo } />
    </Switch>
  );

  return (
    <div>
      <main>
        <Layout>
          { routes }
        </Layout>
      </main>
    </div>
  );
};

【问题讨论】：

标签： reactjs material-ui react-router-dom

【解决方案1】：

const App = () => {
  let routes = (
    <Switch>
      <Route exact path="/" component={ LandingPage } />
      <SomeRoute path="/path1" component={ PathOne } />
      <SomeRoute path="/path2" component={ PathTwo } />
    </Switch>
  );

  return (
    <div>
      <main>
          { routes }
      </main>
    </div>
  );
};

const someRoute = ({ component: Component, ...rest }) => {
    return (
    <Route {...rest} render={props => <Layout><Component {...props} /></Layout>} />}
    )
}

你可以这样做。希望这行得通。

这是如何在文档中执行此操作的示例。 https://reacttraining.com/react-router/web/example/auth-workflow

【讨论】：