二、umi路由

一、路由

1、约定式路由

// 假设 pages 目录结构如下：
+ pages/
  + users/
    - index.js
    - list.js
  - index.js
// 那么，umi 会自动生成路由配置如下：
[{ path: '/', component: './pages/index.js' },
  { path: '/users/', component: './pages/users/index.js' },
  { path: '/users/list', component: './pages/users/list.js' },]

// 假设 pages 目录结构如下：
+ pages/
  + $post/
    - index.js
    - comments.js
  + users/
    $id.js
  - index.js
// 那么，umi 会自动生成路由配置如下：
[{ path: '/', component: './pages/index.js' },
  { path: '/users/:id', component: './pages/users/$id.js' },
  { path: '/:post/', component: './pages/$post/index.js' },
  { path: '/:post/comments', component: './pages/$post/comments.js' },]

// 假设 pages 目录结构如下：
+ pages/
  + users/
    - $id$.js
  - index.js
// 那么，umi 会自动生成路由配置如下：
[{ path: '/': component: './pages/index.js' },
  { path: '/users/:id?': component: './pages/users/$id$.js' },]

// 假设 pages 目录结构如下：
+ pages/
  + users/
    - _layout.js
    - $id.js
    - index.js
// 那么，umi 会自动生成路由配置如下：
[{ path: '/users', component: './pages/users/_layout.js',
    routes: [
     { path: '/users/', component: './pages/users/index.js' },
     { path: '/users/:id', component: './pages/users/$id.js' },],},]

2、编译时配置式路由

// 下面只是配置的默认导出的一个routers、plugins属性，实际上还可以有其它属性的
export default {
   routes: [
    { path: '/', component: '@/layouts/basic' }, // 这里就是用@来指定目录
    { path: '/list', component: './b',redirect: '/users'},
    { path: '/users', component: './users/_layout',
      routes: [{ path: '/users/detail', component: './users/detail' },
        { path: '/users/:id', component: './users/id' }]},
    ],
    plugins: [['umi-plugin-react',{dva: {immer: true}}],]
};

2.2、权限路由

{
  path: '/',
  component: '../layouts/BasicLayout',
  Routes: ['src/pages/Authorized'],
  authority: ['admin', 'user'],
}

2.3、路由动效

2.4、启用 Hash 路由

export default {history: 'hash',}

3、运行时配置式路由

// 这个在最前面添加一个 /foo 路由
export function patchRoutes(routes) {
  routes[0].unshift({
    path: '/foo',
    component: require('./routes/foo').default,
  });
}

// 这个就为根据服务端的请求，动态更新路由
let extraRoutes;
export function patchRoutes({ routes }) {
  merge(routes, extraRoutes);
}
export function render() {
  fetch('/api/routes').then((res) => { extraRoutes = res.routes })
}

export function render(oldRender) {
    getLoginStatus(); // 这个为登陆验证的方法
    oldRender();
}

// 判断是否进行了登陆
import { history } from 'umi';
export function render(oldRender) {
  fetch('/api/auth').then(auth => {
    if (auth.isLogin) { oldRender() } // 如果登陆了，就执行 组件里面应该执行的render方法
    else { history.push('/login'); } // 没有登陆，就跳转
  });
}

export function onRouteChange({ location, routes, action }) {
  bacon(location.pathname); // 比如bacon为一个进行埋点统计的路由，传入的参数为需要去到的路由页面
}

export function rootContainer(container) {
  const DvaContainer = require('@tmp/DvaContainer').default;
  return React.createElement(DvaContainer, null, container);
}

export function modifyRouteProps(props, { route }) {
  return { ...props, foo: 'bar' };
}

二、路由跳转

import Link from 'umi/link';
export default () => (<Link to="/list">Go to list page</Link>);

import router from 'umi/router';
function goToListPage() {router.push('/list');}

this.props.history.push('/user/list')

// query传参
this.props.history.push({ pathname : '/sort' ,query : { name: ' sunny'} })
this.props.location.query.name; // 接收参数

// state传参
this.props.history.push({ pathname:'/sort',state:{name : 'sunny' } })
this.props.location.state.name; // 接收参数


// 组件中使用this.props.history
import React, { Component } from 'react';
import { connect } from 'dva';
import {withRouter} from "react-router-dom";
class Test extends Component {
  func(pro) {this.props.history.push({pathname: '/Demo', state: {my: 1111, my2: 2222}})} // 这个时候就可以访问到this.props.history了
  render() {return (<><div onClick={()=>{this.func();}}></div></>);}
}
export default connect(()=>{return {};})(withRouter(Test));

// 另外一个组件中接收传过来的路由参数
class Demo extends Component {
  componentDidMount() {this.props.location.state;} // 输出为{my: 1111, my2: 2222}。如果不是从上面的组件点击跳转的，那么this.props.location.state的值为undefined
}
export default Demo;

三、Module Processor

.js, .jsx, .mjs, .jsx, .json: 由 babel-loader 处理
.ts: 由 ts-loader 处理
.graphql, .gql: 由 graphql-tag/loader 处理
.css, .less, .sass: 由 css-loader, postcss-loader, less-loader 处理
.svg: 由 @svgr/core 处理。使用 umi，你可以用如下方式引入 svg
import { ReactComponent as Avatar } from './avatar.svg'
function Example() {return <Avatar />}