You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.5 KiB
61 lines
1.5 KiB
# 布局
|
|
|
|
## 新增布局
|
|
|
|
以新增名为 `secondary` 的布局为例，使以 `secondary` 开头的路由都使用该布局。
|
|
|
|
1. 在 `src/utils/config.js` 新增相关配置，参数详细请查看 [layouts](/zh-cn/configuration?id=layouts)。
|
|
|
|
```javascript
|
|
layouts: [
|
|
{
|
|
name: 'primary',
|
|
include: [/.*/],
|
|
exclude: [/(\/(en|zh))*\/login/, /(\/(en|zh))*\/secondary\/(.*)/],
|
|
},
|
|
{
|
|
name: 'secondary',
|
|
include: [/(\/(en|zh))*\/secondary\/(.*)/],
|
|
},
|
|
],
|
|
```
|
|
|
|
2. 在`src/layouts/BaseLayout.js` 文件中新增 `secondary` 布局组件。
|
|
|
|
```javascript
|
|
import SecondaryLayout from './SecondaryLayout'
|
|
|
|
const LayoutMap = {
|
|
primary: PrimaryLayout,
|
|
public: PublicLayout,
|
|
secondary: SecondaryLayout,
|
|
}
|
|
```
|
|
|
|
3. 在`src/layouts/` 目录中新增 `SecondaryLayout.js` 文件。
|
|
|
|
```javascript
|
|
import React from 'react'
|
|
|
|
export default ({ children }) => {
|
|
return (
|
|
<div>
|
|
<h1>Secondary</h1>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
4. 在`src/pages/` 目录中新增 `secondary/index.js` 文件。
|
|
|
|
```javascript
|
|
import React from 'react'
|
|
|
|
export default ({ children }) => {
|
|
return <div>Secondary page Content</div>
|
|
}
|
|
```
|
|
|
|
5. 最后，启动开发模式 `npm run start`，打开 [http://localhost:7000/secondary/](http://localhost:7000/secondary/)，你将看到 `secondary` 布局的页面。
|