History

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

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

例如:

  1. const history = createBrowserHistory({ ... })
  2. // 全局直接使用
  3. history.push('/user')
  4. // 在组件内部使用
  5. const _A = () => <div onClick={() => this.props.router.push('/user')}>A</div>
  6. // 如果要在内部使用,需要使用 withRouter 装饰器
  7. const A = withRouter(_A)
  8. <Router history={history}>
  9. <Route path="/" component={App}>
  10. <IndexRoute component={A} />
  11. <Route path="user" component={User} />
  12. </Route>
  13. </Router>

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

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

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

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

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

方法

push

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

  1. // 推入普通路径
  2. router.push('/users/12')
  3. // 或使用位置描述对象
  4. router.push({
  5. pathname: '/users/12',
  6. query: { modal: true }
  7. })
  8. // 推入路径带参数
  9. router.push('/users/12', { m: 1 })

方法参数:

参数名类型描述必选支持版本
pathString|ObjectURL 或位置描述对象
dataany跳页要传递的数据

replace

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

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

方法参数:

参数名类型描述必选支持版本
pathString|ObjectURL 或位置描述对象

goto

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

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

方法参数:

参数名类型描述必选支持版本
pathString|ObjectURL 或位置描述对象
dataany跳页要传递的数据

pop

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

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

方法参数:

参数名类型描述必选支持版本
pathString|ObjectURL 或位置描述对象
dataany跳页要传递的数据

go

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

  1. C0 --> x1 --> x2 --> C1 --> C2 --> C3

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

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

方法参数:

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

goBack

go(-1) 的快捷方式

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

方法参数:

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

goForward

go(1) 的快捷方式

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

方法参数:

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

exit

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

  1. C0 --> x1 --> x2 --> C1 --> C2 --> C3

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

  1. router.exit()

方法参数:

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