ant Design Pro 嵌套路由

文章转自我的语雀：https://www.yuque.com/liuyin-zzwa0/ada6ao/qi3n6u

Ant Design Pro 使用了 umi.js（中文名：乌米）进行页面路由管理

在 router.config.js 中使用了配置式的路由

export default {
  routes: [
    { path: '/', component: './a' },
    { path: '/users',
      routes: [
        { path: '/users/detail', component: './users/detail' },
        { path: '/users/:id', component: './users/id' }
      ]
    },
  ],
};

上面的代码就会带来嵌套路由，在浏览器中输入 /users 时，项目会自动定位到 component: './users/index' 中，但由于page/users/ 中无该组件，会导致页面出现404或者空白。

解决办法有两种

已经确定实际要渲染的页面

直接在 routes 中添加一个重定向的路由

{ path: '/users', component: './users/_layout',
  routes: [
    { path: '/users', redirect: '/users/detail', },
    { path: '/users/detail', component: './users/detail' },
    { path: '/users/:id', component: './users/id' }
  ]
},

在页面中才能确定的路由

在页面中使用 router.replace 进行重定向

{ path: '/users', component: './users/_layout',
  routes: [
    { path: '/users/detail', component: './users/detail' },
    { path: '/users/:id', component: './users/id' }
    { path: '/users/:id/settings', component: './users/settings' }
  ]
},

此时在 settings.js中

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import router from 'umi/router';

class Layout extends PureComponent { 
    pageRedirect = () => {
    const { match: { url, params }, location: { pathname, query, search } } = this.props;
    if(url == pathname){
      router.replace(`${url.replace(/\/$/, '')}/settings${search}`)
    }
  }
  componentDidMount(){
    this.pageRedirect();
  }
  componentDidUpdate(){
    this.pageRedirect();
  }
    
    render(){
    const { match: { url }, location: { pathname }, children } = this.props;
    const isRoot =  url == pathname;
    
    return(
        <div>
        <div>这是layout</div>
        <div>
        {isRoot ? null : children} // 防止未指定时渲染出 umi的404
        </div>
      </div>
    );
  }
}

FQA: 为什么 componentDidMount 中也要调用 pageRedirect 这个方法呢？

因为该组件在初始化及整个生命周期中没有 props 跟 state 的更改，也就不会有页面的重新 render，会导致 componentDidUpdate 无法被触发，若是能确定在组件的生命周期中会重新触发 render ， componentDidMount 中可以不执行 pageRedirect 方法

特殊情况也会出现 404

例如下面这种写法：

{
    path: '/reception',
    name: 'reception',
    icon: 'schedule',
    authority: ['admin', 'user'],
  routes: [
          {
            path: '/reception/',
            name: 'list',
            component: './Reception/ReceptionSchemeList',
            hideInMenu: true,
          },
          {
            path: '/reception/:receptionGroupId',
            name: 'detail',
            component: './Reception/ReceptionScheme/Index',
            hideInMenu: true,
          },
          {
            path: '/reception/company/:structureId',
            component: './Reception/Company/Index',
            hideInMenu: true,
          }
    ]
},

输入 reception/company/123 后，会出现如下页面：

image.png

这是因为 umi 优先匹配到 '/reception/:receptionGroupId'了，解决办法是提高 '/reception/company/:structureId' 的优先级, 即链接的同级中，固定的一定要先于动态的。

{
    path: '/reception/company/:structureId',
    component: './Reception/Company/Index',
    hideInMenu: true,
},
{
  path: '/reception/:receptionGroupId',
  name: 'detail',
  component: './Reception/ReceptionScheme/Index',
  hideInMenu: true,
},

最后编辑于：2019.04.15 23:04:38