Question

我有一个Layout组件，它由标题和左侧导航组成。我正在使用react router dom在布局中渲染我的路线。这很好。但是我需要在Layout之外渲染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>
  );
};

Answer 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

如何在我的布局组件外部渲染组件（主页）？

1 个答案: