Использование нескольких макетов для компонентов реактивного маршрутизатора

Ответ 1

Я решил это в соответствии с Общий пример корня

Вы можете использовать маршруты без пути для определения контейнеров, которые не определены URL:

<Route path="/" component={Containers.App}>

  { /* Routes that use layout 1 */ }
  <Route component={Containers.Layout1}>
    <IndexRoute component={Containers.Home}/>
    <Route path="about" component={Containers.About}/>
    <Route path="faq" component={Containers.Faq}/>
    <Route path="etc" component={Containers.Etc}/>
  </Route>

  <Route component={Containers.Layout2}>
    { /* Routes that use layout 2 */ }
    <Route path="products" component={Containers.Products}/>
    <Route path="gallery" component={Containers.Gallery}/>
  </Route>
</Route>

Компоненты компоновки могут затем импортировать дополнительные компоненты, такие как верхний nav

Ответ 2

Здесь отличный способ использовать несколько макетов с различными компонентами React.

В вашем маршрутизаторе вы можете использовать:

<Router history={browserHistory}>
  <Route component={MainLayout}>
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
  </Route>
  <Route component={EmptyLayout}>
    <Route path="/sign-in" component={SignIn} />
  </Route>
  <Route path="*" component={NotFound}/>
</Router>

Источник: https://sergiotapia.me/different-layouts-with-react-router-71c553dbe01d

Ответ 3

Pintouch, я смог заставить это работать со следующим примером:

Layout1:

import React from 'react'

const Layout1 = (props) => (
    <div>
        <h1>Layout 1</h1>
        {props.children}
    </div>
)

export default Layout1

Layout2:

import React from 'react'

const Layout2 = (props) => (
    <div>
        <h1>Layout 2</h1>
        {props.children}
    </div>
)

export default Layout2

Контейнер макетов:

import React from 'react'

const LayoutContainer = (props) => (
    <div>
                {props.children}
    </div>
)

export default LayoutContainer

Маршруты

import React from 'react';
import { Router, Route, IndexRoute, hashHistory } from 'react-router';

import LayoutContainer from './LayoutContainer'
import Layout1 from './Layout1'
import Layout2 from './Layout2'
import ContactManagerView from './ContactManagerView'
import CallerIdView from './CallerIdView'
import NotFound from './NotFound'

<Router history={hashHistory}>
    <Route path="/" component={LayoutContainer}>
        <Route component={Layout1}>
            <IndexRoute component={DashboardView}/>
            <Route path='Contacts' component={ContactManagerView}/>
        </Route>

        <Route component={Layout2}>
            <Route path='CallerId' component={CallerIdView}/>
        </Route>

        <Route component={Layout}>
            <Route path='*' component={NotFound}/>
        </Route>
    </Route>
</Router>

Ответ 4

Свойство Route Path некоторое время принимает массив строк. Смотрите https://github.com/ReactTraining/react-router/pull/5889/commits/4b79b968389a5bda6141ac83c7118fba9c25ff05

Упрощено, чтобы соответствовать маршрутам вопроса, но я работаю с несколькими макетами, по сути, так (с помощьюact-router 5):

<App>
  <Switch>
    <Route path={["/products", "/gallery"]}>
      <LayoutTwo>
        <Switch>
          <Route path="/products" component={Products} />
          <Route path="/gallery" component={Gallery} />
        </Switch>
      </LayoutTwo>
    </Route>
    {/* Layout 1 is last because it is used for the root "/" and will be greedy */}
    <Route path={["/about", "/faq", "/etc", "/"]}>
      <LayoutOne>
        <Switch>
          <IndexRoute component={Home} />
          <Route path="/about" component={About} />
          <Route path="/faq" component={Faq} />
          <Route path="/etc" component={Etc} />
        </Switch>
      </LayoutOne>
    </Route>
  </Switch>
</App>

Это решение предотвращает повторную установку макетов при изменении маршрута, что может нарушить переходы и т.д.

Ответ 5

Я наткнулся на этот вопрос и нашел решение, которым хочу поделиться.

Реактивный маршрутизатор v4 позволяет отображать маршруты прямо в вашем макете. Который более читабелен и прост в обслуживании.

раскладка

export class MainLayout extends React.PureComponent {
  render() {
    return (
      <div>
        <Header />
        {this.props.children}
        <Footer />
      </div>
    );
  }
}

Mainlayout.propTypes = {
  children: PropTypes.node.isRequired,
}

маршрутизатор

export default function App() {
  return (
    <Switch>
      <MainLayout>
        <Switch>
          <Route path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </MainLayout>
      <OtherLayout>
        .... other paths
      </OtherLayout>
    </Switch>
  );
}

Ответ 6

Вы можете создать функцию RouteWithLayout которая отображает <Route> обернутый в макет:

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

const MainLayout = props => (
  <div>
    <h1>Main</h1>
    {props.children}
  </div>
)

const AltLayout = props => (
  <div>
    <h1>Alt</h1>
    {props.children}
  </div>
)

const Foo = () => (
  <p>Foo</p>
)

const Bar = () => (
  <p>Bar</p>
)

const App = () => (
  <div>
    <Switch>
      <RouteWithLayout exact path="/foo" layout={MainLayout} component={Foo} />
      <RouteWithLayout exact path="/bar" layout={AltLayout} component={Bar} />
    </Switch>
  </div>
)