umi react router 路由

环境

yarn global add umi //全局安装umi乌米

mkdir myapp && cd myapp //创建空文件夹并进入文件夹

yarn create umi

//❯ app             - Create project with a simple boilerplate, support typescript.
//Do you want to use typescript? (y/N)
//❯◯ antd


yarn start //启动项目

官方文档

文件结构

在pages文件夹下新建文件夹，users，然后新建四个文件

.
├── layouts
│   ├── index.css
│   └── index.js
└── pages
    ├── index.js
    └── users
        ├── $detail.js
        ├── _layout.js
        ├── index.js
        └── query.js

• $detail.js 是动态路由，需要在命名前添加$
• query.js是会带query参数要打开的页面，还处理了hash定位
• _layout.js是user路由下的布局文件，相当于子路由
• index.js是user默认打开页面
• layouts是全局页面布局文件夹

路由umi会自动根据文件结构处理，我们可以不管，当然也可以自己定义。这里只关注路由打开、传参方式

Link打开

先在user的默认打开页面定添加打开路由

// user/index.js

import Link from 'umi/link'

<Link to="/users/query/"> to query </Link><br></br>
<Link to={{
    pathname:"/users/query/",
    query:{
        name:'name1',
        id:'id123',
    }
}}> to query obj </Link><br></br>
<Link to="/users/123123"> to /users/:detail </Link>

 

路由为：

第一个、/users/query/

第二个、/users/query/?id=id123&name=name1

第三个、/users/123123

js打开

import router from 'umi/router'

//法一
router.push('/users/'+args.id);
//法二
router.push({
    pathname:'/users/query/',
    query:{
        id:args.id,
        name:args.name
    },
    hash:'id8',
    state:args,
    state2:args,//可以任意添加
});

query可以额外传对象的参数，路由为

第一个、/users/123123

第二个、/users/query/?id=id123&name=name1

 

页面获取参数方法

this.props.location = 
{
    hash: "#id7",
    key: "51uuto",
    pathname: "/users/123123",
    query: {},
    params:{},
    search: "id=id123&name=name1",
    state: undefined,
    state2: undefined,
}

hash不会定位，需要自行处理。

hash 自行定位

法一：

//与href效果相同
document.getElementById(idName).scrollIntoView()

法二：

//可以让元素位置在窗口上下居中，还需要自行改变页面地址。href不需要
window.scrollTo(0, anchorElement.offsetTop - window.innerHeight / 2);
//不需要更改地址
<a key={i} href={'#id'+i}>{'id'+i}</a>

源码地址