2024年4月23日发(作者：)

umi的history用法

umi框架是一个基于React的开发框架，为了方便开发者在页面

之间进行跳转，umi提供了一些路由管理相关的功能，其中之一就是

history。本文将介绍umi中history的用法。

一、umi中的history

umi提供了两种history类型：browserHistory和hashHistory。

前者使用HTML5的history API，后者则通过URL的hash来实现。

在实际开发中，我们可以根据需求选择使用一种或者两种history。

二、如何使用history

umi的history使用十分简单，我们只需要在配置文件

中加入以下代码即可：

```

export default {

history: 'hash', // 或者 history: 'browser'

}

```

当然，我们还可以根据实际需求设置一些参数。比如，我们可以

通过basename来设置应用的根路径。

```

export default {

history: {

type: 'hash',

- 1 -

basena '/app',

},

}

```

三、history的API

umi的history除了提供路由跳转功能外，还提供了一些常用的

API。

1. push(path: string, state?: any)

跳转到指定路由，同时可以将state作为参数传递。

```

import { history } from 'umi';

('/home', {na 'Jack'})

```

2. replace(path: string, state?: any)

跳转到指定路由，但是不会在浏览器历史记录中留下记录。

```

import { history } from 'umi';

e('/home', {na 'Jack'})

```

3. go(n: number)

跳转到history记录中的第n个页面。

```

- 2 -

import { history } from 'umi';

(-1) // 返回上一页

```

4. goBack()

跳转到上一页。

```

import { history } from 'umi';

()

```

5. goForward()

跳转到下一页。

```

import { history } from 'umi';

ard()

```

四、总结

本文介绍了umi中history的使用方法。在实际开发中，我们可

以根据需求选择使用不同的history类型，并且使用API来实现路由

的跳转。

- 3 -