为反应路由器组件使用多个布局

Question

如果我有以下内容:

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

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

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

我怎样才能使两组路线各自使用不同的布局.

如果我只有一个布局,那么我会把它放在App中,但在这种情况下,我在哪里定义布局？

为了使其更复杂,一些布局组件(例如顶部导航)在两种布局类型之间共享.

Answer 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>

然后,布局组件可以导入其他组件,例如顶部导航

Answer 2

Route 的 path 属性现在已经接受了一个字符串数组。见https://github.com/ReactTraining/react-router/pull/5889/commits/4b79b968389a5bda6141ac83c7118fba9c25ff05

简化以匹配问题路线，但我有多个布局基本上是这样的（使用 react-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>

此解决方案可防止在路线更改时重新安装布局，这可能会破坏过渡等。

Answer 3

这是使用具有不同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

Answer 4

这就是 React Router v6 中的实现方式：

    <Route path="/" element={<App />}>
      {/* Routes that use layout 1 */}
      <Route element={<BlueLayout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="faq" element={<Faq />} />
        <Route path="etc" element={<Etc />} />
      </Route>

      {/* Routes that use layout 2 */}
      <Route element={<RedLayout />}>
        <Route path="products" element={<Products />} />
        <Route path="gallery" element={<Gallery />} />
      </Route>
    </Route>

我在 StackBlitz 中创建了一个完整的示例。

Answer 5

Pintouch,我能够使用以下示例:

布局1:

import React from 'react'

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

export default Layout1

布局2:

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>