Как сделать компонент (домашнюю страницу) вне моего компонента Layout? - PullRequest
Новая
       26

Как сделать компонент (домашнюю страницу) вне моего компонента Layout?

0 голосов
/ 22 мая 2019

У меня есть компонент Layout, который состоит из заголовка и левой боковой панели.Я использую React Router DOM для рендеринга моих маршрутов внутри макета.Это прекрасно работает.Но мне нужно визуализировать компонент LandingPage вне моего Layout, и я не знаю, как это сделать правильно.

См. Код в моем файле 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>
  );
};

1 Ответ

0 голосов
/ 22 мая 2019 
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

...