History

路由操作方式，包含对路由的数据和操作方式，主要用于命令式的路由改变。

有两种选择，可以使用全局的 history，也可以使用注入到组件中的 context.router。

例如：

  • const history = createBrowserHistory({ ... })

// 全局直接使用
history.push('/user')

// 在组件内部使用
const _A = () => <div onClick={() => this.props.router.push('/user')}>A</div>

// 如果要在内部使用，需要使用 withRouter 装饰器
const A = withRouter(_A)

<Router history={history}>
 <Route path="/" component={App}>
   <IndexRoute component={A} />
   <Route path="user" component={User} />
 </Route>
</Router>

详细路由匹配规则可以参见：路由匹配。

需要注意的是，通过路由方法第二个参数传递的参数，是要靠生命周期接收的，如

  • push('/hello', { data: 1 });

里面的 { data: 1 }，就无法在 props.location.query 或 props.params 里面获取，只能通过 inited 生命周期来获取。

我们推荐还是使用路径匹配的语法，通过在路由配置中书写 :name 的方式来传递页面参数，通过 props.params 来获取。可以参见：路径语法。

方法

push #

跳转到新路径，给浏览器历史推入新实例。

  • // 推入普通路径
router.push('/users/12')

// 或使用位置描述对象
router.push({
 pathname: '/users/12',
 query: { modal: true }
})

// 推入路径带参数
router.push('/users/12', { m: 1 })

方法参数:

参数名 类型 描述 必选 支持版本
path String|Object URL 或位置描述对象
data any 跳页要传递的数据

replace #

替换当前历史，不会影响历史堆栈的长度

  • router.replace('/users/12')

方法参数:

参数名 类型 描述 必选 支持版本
path String|Object URL 或位置描述对象

goto #

进行页面跳转，根据历史堆栈的情况选择是前进还是后退

  • router.goto('/users/12')

方法参数:

参数名 类型 描述 必选 支持版本
path String|Object URL 或位置描述对象
data any 跳页要传递的数据

pop #

进行页面回退，退到历史堆栈已有的某个路由

  • router.pop('/users/12')

方法参数:

参数名 类型 描述 必选 支持版本
path String|Object URL 或位置描述对象
data any 跳页要传递的数据

go #

进行页面跳转，前进或后退 n 个历史。注意：在 hy 下的 go() 与 web 下不同，hy 下只在本应用中进行跳转，且不能前进。 当有下面这种历史堆栈的时候（C 表示本应用页面，x 表示其他应用页面）：

  • C0 --> x1 --> x2 --> C1 --> C2 --> C3

在 C3 进行 go(-5)，并不会跳到 C0，而是会跳的 x2，因为回退超出了本应用堆栈范围，就会直接 exit 掉历史栈中最后面的整个应用。

  • router.go(-1, { hello: 'world' })

方法参数:

参数名 类型 描述 必选 支持版本
n Number
data any 跳页要传递的数据

goBack #

go(-1) 的快捷方式

  • router.goBack({ hello: 'world' })

方法参数:

参数名 类型 描述 必选 支持版本
data any 跳页要传递的数据

goForward #

go(1) 的快捷方式

  • router.goForward({ hello: 'world' })

方法参数:

参数名 类型 描述 必选 支持版本
data any 跳页要传递的数据

exit #

退出连续的当前应用页面，例如 C 是当前业务，x 是其他业务，存在这样的历史栈：

  • C0 --> x1 --> x2 --> C1 --> C2 --> C3

在 C3 回退会退到 x2 页面上。当 go(-x) 中的 x 超出了当前应用历史堆栈范围时，效果与 exit 相同。

  • router.exit()

方法参数:

参数名 类型 描述 必选 支持版本
data any 跳页要传递的数据