React 动态路由匹配模式

在react开发中，有时候会碰到一种需求：某一个页面的内容，会根据调用的后台api版本的不同，显示不同的内容。

如果需要显示的内容，只是字段的多少差别，可以在路由中通过传参的方式进行区分。而如果需要显示的内容，差别较大，甚至出现结构差别，就需要通过编写不同组件的方式进行显示。

不同的组件，在动态路由中，需要用到匹配模式，类似于正则的方式对路由进行过滤。

{
                  name: 'demo-1',
                  path: '/application/:id(\\d+)/:key(12|23|11)',
                  component: './demo/demo1',
                },
                {
                  name: 'demo-2',
                  path: '/application/:id(\\d+)/:key(4|5|6)',
                  component: './demo/demo2',
                },
                {
                  name: 'demo-3',
                  path: '/application/:id/:key',
                  component: './demo/demo3',
                },

上面例子中，如果匹配到key是12、23、11会加载demo1组件，匹配到key是4、5或6，会加载demo2组件，其他key值则加载demo3组件，这样就起到了根据不同key值进行动态路由的效果。