在Ant Design中写动态路由

普通的路由像一个映射，通常就是一个类似/path/sth的字符串，对应一个Project中存在的源码组件/page/sth.js，你只要访问/path/sth，代码就自动去调用/page/sth.js文件展现给用户。但是，有的时候，我们希望访问/path/sth/id，而页面也自动使用/page/sth.js来响应，只不过会将路由中的id以参数的形式告诉sth.js组件，以展现具有相应参数的页面。

比如，我最近在给自己写盯盘程序的UI，我的期望是，当我访问/index/000300这个页面时，调用/page/index/中的某sth.js程序，并且让程序知道path中有个000300的参数。类似的，当我访问/index/000905、/index/000015等页面时，同样调用sth.js，并将000905和000015告诉sth.js。此外，在配置路由的时候，只需要写/index/indexCode就能让程序自动映射到/page/index/中的某sth.js程序就好了。

在Ant Design中，要实现这个功能非常简单，参考动态路由。

约定式路由的动态配置

在我的例子中，我需要明确的配置出路由树，因为程序的侧边栏菜单是直接通过路由树生成的，因此，需要做的就是在配置中如此编写：

{
    // ...其他配置
    routes: [
        {
            path: '/index/:code',
            component: 'index/[code]',
            // ...其他配置
        },
        {
            path: '/fund/:code',
            component: 'fund/[code]',
            // ...其他配置
        }
    ]
    // ...其他配置
}

这样就明确的指出凡是访问/index/:code的（即/index/000905、/index/000015）都使用/page/index/[code].js来渲染；凡是访问/fund/:code的都使用/page/fund/[code].js来渲染。

对于真正的约定式路由就更简单了，只需要将project的文件系统组织成下面的形式：

.
  └── pages
    └── [post]
      ├── index.tsx
      └── comments.tsx
    └── users
      └── [id].tsx
    └── index.tsx

约定式路由会自动翻译成配置的路由（这些路由是不需要我们自己配置的，直接通过文件系统生成，这里只是展示理解方便）：

[
  { exact: true, path: '/', component: '@/pages/index' },
  { exact: true, path: '/users/:id', component: '@/pages/users/[id]' },
  { exact: true, path: '/:post/', component: '@/pages/[post]/index' },
  {
    exact: true,
    path: '/:post/comments',
    component: '@/pages/[post]/comments',
  },
];

获取路由参数

以index/:code到/page/index/[code].js为例，当用户访问/index/000905时，[code].js可以直接通过组件的props.match.params.code拿到URL中的:code参数，也就是例子中的字符串'000905'：

// /page/index/[code].js
import React, { Component } from 'react'
//...
@connect(mapStateToProps, mapDispatchToProps)
export default class IndexPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            code: this.props.match.params.code,
        };
    }
    //...
}

总结

其实这个功能有点类似layout模板系统，只不过现在的模板是/page/index/[code].js，并通过props获取参数来进行相应的渲染。