1.子路由

import { defineConfig } from 'umi';
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
    { path: '/user',routes:[
      {
        path:"/user/one",component:'@/pages/user',
      },
      {
        path:"/user/two",component:'@/pages/index'
      }
    ] },
  ],
  fastRefresh: {},
});

2.严格模式

import { defineConfig } from 'umi';
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
   //这里访问/user/one就无法匹配到页面
    { path: '/user',exact:true,component:'@/pages/user',routes:[
      {
        path:"/user/one"
      }
    ] },
  ],
  fastRefresh: {}
});

3.layouts

模板文件，子路由使用共同的模板
在src下新建layouts文件

import React from 'react'
 const Index = (props:any) => {
    return (
        <div>
            <h1>header</h1>
        //这里可以拿到内容插进来的内容，类似于vue的插槽
                   {props.children}
            <h2>Footer</h2>
        </div>
    )
}
export default Index

import { defineConfig } from 'umi';
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
    { path: '/user',
    //这里配置公共部分
    component:'@/layouts/index',
    routes:[
      {
        path:"/user/one",component:'@/pages/user',
      },
      {
        path:"/user/two",component:'@/pages/index'
      }
    ] },
  ],
  fastRefresh: {},
});

4.重定向

Type:string

配置路由跳转。比如： export default { routes: [ { exact: true, path: ‘/‘, redirect: ‘/list’ }, { exact: true, path: ‘/list’, component: ‘list’ }, ],} 访问/会跳转到/list，并由src/pages/list文件进行渲染。

import { defineConfig } from 'umi';
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
    //重定向到一个连接，这里的属性值都是路由地址
    {
      path:"/list",redirect:'/listem',
    },
    //这里有一个页面
    {
      path:"/listem",component:'@/pages/question',
    },
    { path: '/user',
    //这里配置公共部分
    component:'@/layouts/index',
    routes:[
      {
        path:"/user/one",component:'@/pages/user',
      },
      {
        path:"/user/two",component:'@/pages/index'
      }
    ] },
  ],
  fastRefresh: {},
});

5.wrappers

Type:string[]
配置路由的高阶组件封装。
比如，可以用于路由级别的权限校验：
wrapper可以拦截路由

5.1新建文件

在src目录下新建一个wrappers文件

//auth.tsx
import { Redirect } from 'umi'
export default (props:any) => {
  const  isLogin  = false;
  if (isLogin) {
    return <div>{ props.children }</div>;
  } else {
    return <Redirect to="/login" />;
  }
}

5.2配置文件

//.umirc.ts
import { defineConfig } from 'umi';
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
    //重定向到一个连接，这里的属性值都是路由地址
    {
      path:"/list",redirect:'/listem',
    },
    //这里有一个页面
    {
      path:"/listem",component:'@/pages/question',
    },
    {
      path:"/login",component:'@/pages/login',
    },
    { path: '/user',
    //这里配置公共部分
    component:'@/layouts/index',
    //这里会先进入wrappers下的文件，做一个中间件，在这个中间件中可以做路由拦截
    wrappers: [
      '@/wrappers/auth',
    ],
    routes:[
      {
        path:"/user/one",component:'@/pages/user',
      },
      {
        path:"/user/two",component:'@/pages/index'
      }
    ] },
  ],
  fastRefresh: {},
});

//login.tsx
import React from 'react'
export default function login() {
    return (
        <div>
            这是一个登录组件
        </div>
    )
}

这里可以做登录状态的判断

6.404异常处理

import { defineConfig } from 'umi';
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
    //重定向到一个连接，这里的属性值都是路由地址
    {
      path:"/list",redirect:'/listem',
    },
    //这里有一个页面
    {
      path:"/listem",component:'@/pages/question',
    },
    {
      path:"/login",component:'@/pages/login',
    },
     //这里配置找不到路径返回404页面
    {
      component:'@/pages/404'
    },
    { path: '/user',
    //这里配置公共部分
    routes:[
      {
        path:"/user/one",component:'@/pages/user',
      },
      {
        path:"/user/two",component:'@/pages/index'
      },  
      //这里配置找不到路径返回404页面
      {
        component:'@/pages/404'
      }
    ] },
  ],
  fastRefresh: {},
});

//404.tsx
import React from 'react'
export default function NotFound() {
    return (
        <div>
            <h1>这是个404</h1>
        </div>
    )
}

7.动态路由参数

import { defineConfig } from 'umi';
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
    //重定向到一个连接，这里的属性值都是路由地址
    {
      path:"/list",redirect:'/listem',
    },
    //这里有一个页面
    {
      path:"/listem",component:'@/pages/question',
    },
    {
      path:"/login",component:'@/pages/login',
    },
     //这里配置找不到路径返回404页面
    { path: '/user',
    //这里配置公共部分
    routes:[
      {
        path:"/user/one",component:'@/pages/user',
      },
   //这里的id是动态的路由参数，加个？号表示可选的
      {
        path:"/user/two/:id?",component:'@/pages/index'
      },  
      //这里配置找不到路径返回404页面
      {
        component:'@/pages/404'
      }
    ] },
  ],
  fastRefresh: {},
});

这里访问http://localhost:8000/user/two无效，后面需要加动态的一个id 例如：http://localhost:8000/user/two/1

在index.tsx中可以拿到这个参数,通过props.match.params

import styles from './index.less';
export default function IndexPage(props:any) {
{
  console.log(props.match.params);
}
  return (
    <div>
    </div>
  );
}

8.约定式路由

假设route下没有任何配置，它就会使用约定式路由,范文哪个页面直接就是目录加路径即可

除配置式路由外，Umi 也支持约定式路由。约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。

如果没有 routes 配置，Umi 会进入约定式路由模式，然后分析src/pages目录拿到路由配置。
比如以下文件结构：
. └── pages ├── index.tsx └── users.tsx
会得到以下路由配置，

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

需要注意的是，满足以下任意规则的文件不会被注册为路由，

以.或_开头的文件或目录
以d.ts结尾的类型定义文件
以test.ts、spec.ts、e2e.ts结尾的测试文件（适用于.js、.jsx和.tsx文件）
components和component目录
utils和util目录
不是.js、.jsx、.ts或.tsx文件
文件内容不包含 JSX 元素

React 开发笔记

umi路由