布局

新增布局

以新增名为 secondary 的布局为例，使以 seconday 开头的路由都使用该布局。

  1. 在 src/utils/config.js 新增相关配置，参数详细请查看 layouts。

    1. layouts: [
    2.         {
    3.             name: 'primary',
    4.             include: [/.*/],
    5.             exlude: [/(\/(en|zh))*\/login/, /(\/(en|zh))*\/seconday\/(.*)/],
    6.         },
    7.         {
    8.             name: 'secondary',
    9.             include: [/(\/(en|zh))*\/seconday\/(.*)/],
    10.         },
    11. ],

  2. 在src/layouts/BaseLayout.js 文件中新增 secondary 布局组件。

    1. import SecondaryLayout from './SecondaryLayout'
    3. const LayoutMap = {
    4.   primary: PrimaryLayout,
    5.   public: PublicLayout,
    6.   secondary: SecondaryLayout,
    7. }

  3. 在src/layouts/ 目录中新增 SecondaryLayout.js 文件。

    1. import React from 'react'
    3. export default ({ children }) => {
    4.   return (
    5.     <div>
    6.       <h1>Seconday</h1>
    7.       {children}
    8.     </div>
    9.   )
    10. }

  4. 在src/pages/ 目录中新增 seconday/index.js 文件。

    1. import React from 'react'
    3. export default ({ children }) => {
    4.   return <div>Seconday page Content</div>
    5. }

  5. 最后，启动开发模式 npm run start，打开 http://localhost:7000/seconday/，你将看到 seconday 布局的页面。