[Taro Entry: 4] Routes

This is the second day of my participation in Gwen Challenge

Introduce a,

Taro has its own routing function, and its API is consistent with wechat mini program, including the following API:

NavigateTo: Fail webview count limit exceed navigateTo: Fail webview count limit exceed

Second, Api practice

2.1: Taro. SwitchTab

Jump to the tabBar page and close all other non-Tabbar pages. Tabbar needs to be configured in app.config.js:

// app.config.js 
export default {
// Omit other configurations
pages: [
    'pages/index/index'.'pages/index/introduce/introduce'.'pages/index/latest-version/latest-version'.'pages/mengde/index'.'pages/liyue/index'].tabBar: {
    "color": "# 000000"."selectedColor": "#3cc51f"."backgroundColor": "#E1FFFF"."list": [{
      "pagePath": "pages/index/index"."iconPath": "image/icon_component.png"."selectedIconPath": "image/icon_component.png"."text": "Home page"
    }, {
      "pagePath": "pages/mengde/index"."iconPath": "Image/kiwifruit. PNG"."selectedIconPath": "Image/kiwifruit. PNG"."text": ","
    }, {
      "pagePath": "pages/liyue/index"."iconPath": "Image/Cherry Tomatoes.png"."selectedIconPath": "Image/Cherry Tomatoes.png"."text": "In glass"}]}}Copy the code

// An example
import { Component } from 'react'
import { View,Button } from '@tarojs/components'
import Taro from '@tarojs/taro'

export default class Index extends Component {
  render () {
    return (
      <View className='introduce'>Protogod is an open-world adventure game, which means that from the first moment you set foot in Tiwat, there's always a way to see new scenery, whether it's climbing mountains or crossing rivers, as long as you plan your energy properly.<View class="index-tabs">
          <Button onClick={()= >{Taro. SwitchTab ({url: '/ pages/mengde/index'})}} > mond</Button>
          <Button onClick={()= >{Taro. SwitchTab ({url: '/ pages/liyue/index'})}} > glass</Button>
        </View>
      </View>)}}Copy the code

The experience of using switchTab is the same as that of directly clicking tabbar. In my opinion, it is mainly used for switching to tabbar pages from non-Tabbar pages. Because tabbar is not displayed on non-tabbar pages, you cannot switch to tabbar by clicking tabbar.

2.2: Taro. ReLaunch

Close all pages and open a page within the app.

// src\pages\index\latest-version\latest-version.jsx
import { Component } from 'react'
import { View,Button } from '@tarojs/components'
import Taro,{getCurrentPages} from '@tarojs/taro'

export default class Index extends Component {
    componentDidMount(){
        // Prints the current page stack
        console.log('getCurrentPages()',getCurrentPages())
    }
  render () {
    return (
      <View className='introduce'>"Original God", "Song of Dust around Jade Fei" version 1.5<Button onClick={()= >Taro.reLaunch({url:'/pages/index/latest-version/latest-version'})}>ReLaunch</Button>
        <View>
        </View>
      </View>)}}Copy the code

When we mount the page, callgetCurrentPagesPrints the current page stack. Observe the page stack when entering the page from the home page and relaunching it:You can see:

• When you enter the page from the home page, there are two records of the home page and the page in the page stack, and the Back button is displayed on the left side of the top navigation bar.
• When reLaunch launches the page, the only record for that page is in the page stack, and the Home button is displayed to the left of the top navigation bar.

ReLaunch will close all pages before opening the specified page, so the applet will refresh.

RedirectTo/Taro. NavigateTo

Close or save the current page to switch to a page in the application. However, jumping to the Tabbar page is not allowed.

The function of the two apis is basically the same, but the difference is whether the current page is kept in the page stack, that is, whether it can be returned to the current page through the Back.

// src\pages\index\index.jsx
import { Component } from 'react'
import { View, Text, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './index.scss'

export default class Index extends Component {

  render() {
    return (
      <View className='index'>
        <Text>Hello, the original god!</Text>
        <View class="index-tabs">
          <Button onClick={()= >Taro. NavigateTo ({url: '/ pages/index/introduce introduce})} > is introduced</Button>
          <Button onClick={()= >Taro. RedirectTo ({URL: '/pages/index/latest-version/latest-version'})}> Latest version</Button>
        </View>
      </View>)}}Copy the code

2.4: Taro. NavigateBack

Close the current page and return to the previous page or multi-level page. You can use getCurrentPages to get the current page stack and determine how many layers you need to return. If no parameter is passed, the previous page is returned by default. You can also specify the number of layers to return by passing {delta:number}.

// src\pages\index\introduce\introduce.jsx
import { Component } from 'react'
import { View,Button } from '@tarojs/components'
import Taro from '@tarojs/taro'

export default class Index extends Component {
  render () {
    return (
      <View className='introduce'>Protogod is an open-world adventure game, which means that from the first moment you set foot in Tiwat, there's always a way to see new scenery, whether it's climbing mountains or crossing rivers, as long as you plan your energy properly.<Button onClick={()= >Taro. NavigateBack ()} > return</Button>
      </View>)}}Copy the code

Page stack

Page stack refers to the records of page visits in wechat applet. The page stack in the applet can maintain up to 10 records. When there are 10 records in the stack, the page cannot be jumped through Taro. NavigateTo.

4. Route parameter transmission

4.1 Introduction and practice of Parameter Transfer

When a page jumps, you can pass parameters to the new page by adding parameters after the URL. Between parameters and paths? Parameter keys and parameter values are connected with =, different parameters are separated with &; Such as’ path? Key = value&key 2 = value2 ‘.

// index.jsx
import { Component } from 'react'
import { View, Text, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './index.scss'

export default class Index extends Component {
  render() {
    return (
      <View className='index'>
        <Text>Hello, the original god!</Text>
        <View class="index-tabs">
          <Button onClick={()= >Taro.navigateTo({ url: '/pages/index/introduce/introduce? The date = 2021-06-02 & weather = sunny '})} > is introduced</Button>
        </View>
      </View>)}}// introduce. JSX
import { Component } from 'react'
import { View,Button } from '@tarojs/components'
import Taro, { getCurrentInstance } from '@tarojs/taro'

export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state={}
  }
  componentDidMount(){
    let {date,weather } = getCurrentInstance().router.params
    console.log('date,weather',date,weather)
    this.setState({
      date,
      weather
    })
  }
  render () {
    return (
      <View className='introduce'>Protogod is an open-world adventure game, which means that from the first moment you set foot in Tiwat, there's always a way to see new scenery, whether it's climbing mountains or crossing rivers, as long as you plan your energy properly.<View>Date:{this.state.date}</View>
          <View>Weather:{this.state.weather}</View>
      </View>)}}Copy the code

Page effect:

4.2 Whether apis can be Transmitted through routes