umi react router 路由

心已赠人 2022-03-09 13:56 676阅读 0赞

## 环境 ##

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 //启动项目

[官方文档][Link 1]

### 文件结构 ###

在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>

[源码地址][Link 2]

[Link 1]: https://umijs.org/zh/guide/create-umi-app.html#%E4%BB%8B%E7%BB%8D-create-umi
[Link 2]: https://github.com/Cribug8080/react-router-demo