Taro中使用 react Hooks 如何通过路由传递和接受参数

最近看了一下 taro 的文档，便着手搭建了一套框架改版了一下之前的小程序。taro目前选择的是3.x版本。

首先，简单说一下传递参数。在taro中路由跳转方式共有五种。

路由跳转

1. Taro.switchTab(option)  跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

2. Taro.reLaunch(option) 关闭所有页面，打开到应用内的某个页面

3. Taro.redirectTo(option) 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

4. Taro.navigateTo(option) 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 Taro.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

5. Taro.navigateBack(option) 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

传递方式都一样，在 option中传递url参数，直接在跳转路径后面拼接：

Taro.navigateTo({
  url: 'B?id=1'
})

 

Hooks 中参数接受

通过查阅资料，我们要先注意下官方文档这句话

我们使用Hooks的时候要注意是Taro专有的，还是react框架自己拥有的。

接收参数的时候需要使用到 useRouter 这个Hooks。我们在看官方文档介绍。

useRouter 是Taro专有的Hook。

所以我们首先需要在接收参数的页面上引用Hook

import Taro, { useRouter } from '@tarojs/taro'

接下来，我们只需在页面中通过 useRouter() 返回的是一个对象，里面是我们所传递的所有的参数。