在 src/page 文件夹下创建 Dashboard 文件夹，同时在该文件夹中新建 Analysis.js, Monitor.js, Workplace.js 三个视图组件，目录结构如下:
├── Dashboard
│ ├── Analysis.js
│ ├── Monitor.js
│ └── Workplace.js
...// 省略其他章节中的目录
routes 配置介绍
export default { routes: [{ path: ‘/‘, component: ‘../layout‘, routes: [ { path: ‘/‘, component: ‘Helloworld‘, }, { path: ‘/helloworld‘, component: ‘Helloworld‘ }, { path: ‘/dashboard‘, routes: [ { path: ‘/dashboard/analysis‘, component: ‘Dashboard/Analysis‘ }, { path: ‘/dashboard/monitor‘, component: ‘Dashboard/Monitor‘ }, { path: ‘/dashboard/workplace‘, component: ‘Dashboard/Workplace‘ } ] }, ] }], };
这段配置的意思是指:
/ 下面的路由的时，使用 page 文件夹下的 ../layout 布局文件渲染页面，默认展示Helloworld组件/dashboard/analysis 时，使用 page 文件夹下的 Dashboard/Analysis 组件渲染到 layout 文件中 children 部分/dashboard/monitor 时，使用 page 文件夹下的 Dashboard/Monitor 组件渲染到 layout 文件中 children 部分/dashboard/workplace 时，使用 page 文件夹下的 Dashboard/Workplace 组件渲染到 layout 文件中 children 部分layout 文件中 children解释：
import { Component } from ‘react‘;
import { Layout } from ‘antd‘;
// Header, Footer, Sider, Content组件在Layout组件模块下
const { Header, Footer, Sider, Content } = Layout;
class BasicLayout extends Component {
render() {
return (
<Layout>
<Sider>Sider</Sider>
<Layout>
<Header>Header</Header>
<Content>{ this.props.children }</Content> //这里
<Footer>Footer</Footer>
</Layout>
</Layout>
)
}
}
export default BasicLayout;
上面代码中，我们创建了一个三部分的基本布局：Header 、Content 、Footer。然后我们将 Content 替换成 { this.props.children }，这样之后我们设置的路由会通过替换 children 变量实现内容的切换。
this.props.children获取的内容是<Content> {/代码块/} </Content> 包住的代码块，可以据此获取子组件中的内容。
原文：https://www.cnblogs.com/nhz-M/p/10348505.html