普通的路由像一个映射，通常就是一个类似/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中，要实现这个功能非常简单，参考动态路由。

约定式路由的动态配置#

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

1
{
2
    // ...其他配置
3
    routes: [
4
        {
5
            path: '/index/:code',
6
            component: 'index/[code]',
7
            // ...其他配置
8
        },
9
        {
10
            path: '/fund/:code',
11
            component: 'fund/[code]',
12
            // ...其他配置
13
        }
14
    ]
15
    // ...其他配置
16
}

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

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

1
.
2
  └── pages
3
    └── [post]
4
      ├── index.tsx
5
      └── comments.tsx
6
    └── users
7
      └── [id].tsx
8
    └── index.tsx

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

1
[
2
  { exact: true, path: '/', component: '@/pages/index' },
3
  { exact: true, path: '/users/:id', component: '@/pages/users/[id]' },
4
  { exact: true, path: '/:post/', component: '@/pages/[post]/index' },
5
  {
6
    exact: true,
7
    path: '/:post/comments',
8
    component: '@/pages/[post]/comments',
9
  },
10
];

获取路由参数#

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

1
import React, { Component } from 'react'
2
//...
3
@connect(mapStateToProps, mapDispatchToProps)
4
export default class IndexPage extends Component {
5
    constructor(props) {
6
        super(props);
7
        this.state = {
8
            code: this.props.match.params.code,
9
        };
10
    }
11
    //...
12
}

总结#

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