taro路由配置 路由跳转和传参

目录

• taro路由配置和跳转 路由传参
  • 路由跳转
  • 传递参数

 

taro路由配置和跳转 路由传参

顶级组件App pages属性配置
谁在pages数组最上面，就默认打开谁

import Taro, { Component, Config } from '@tarojs/taro'
import Index from './pages/index'

import './app.less'

// 如果需要在 h5 环境中开启 React Devtools
// 取消以下注释：
// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {
//   require('nerv-devtools')
// }

class App extends Component {

  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    pages: [
      'pages/island/index',
      'pages/index/index'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }

  // 在 App 类中的 render() 函数没有实际作用
  // 请勿修改此函数
  render () {
    return (
      <Index />
    )
  }
}

Taro.render(<App />, document.getElementById('app'))

路由跳转

• navigatorTo 三端都支持 小程序、h5、rn 最基本的跳转
• redirectorTo 没有上一页的历史记录，其他的和navigatorTo一样
• switchTab
• navigatorBack 可以返回上一页
• relaunch 关闭所有页面，三端都支持

传递参数

import Taro, { useState } from '@tarojs/taro';
import { View, Text, Button } from '@tarojs/components';

export default function Index(props) {

    const [msg,] = useState('island msg')

    const toIndex = () => {
        const url = '/pages/index/index?msg=' + msg
        Taro.navigateTo({url}) // 可以返回上一页
        // Taro.redirectTo({ url }) // 没有上一页的历史记录，不能返回
    }

    return <View>
        <Text>island page</Text>
        <Button onClick={toIndex}>去index页面</Button>
    </View>

}