修炼之 Route篇详解

 

在 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>   包住的代码块，可以据此获取子组件中的内容。

学习链接