Quelles sont les différentes façons de sauter dans le routage de réaction ?

Méthode : 1. Utilisez les paramètres, les paramètres seront affichés dans la barre d'adresse, la syntaxe est "...({pathname:...,search:address bar data})" ; ne sera pas visible dans la barre d'adresse. Syntaxe "...({pathname:...,state:{test:...}}".

L'environnement d'exploitation de ce tutoriel : système Windows 10. , React version 17.0.1, ordinateur Dell G3

Quelles sont les différentes façons de sauter pour réagir aux routes

Remarque: Lereact-router-domutilisé ici est la version 5 ou supérieure, et le formulaire de routage est en modehistory
react-router-domAdresse du document, y compris l'adresse github du package dépendanthistoryreact-router-dom是版本5以上，路由形式是history模式
react-router-dom文档地址，其中依赖包history的github地址

1.params形式，路由跳转后，参数会显示在地址栏

• 跳转的方法是使用history.push({pathname: '/personal', search: 'test=22222'})，其中search键对应的值就是拼接在地址栏的数据

  import React from 'react'import { useHistory } from 'react-router-dom'export default ()=> { const history = useHistory() // 页面跳转方法 history.push({pathname: '/personal', search: 'test=22222'}) return 123}

  Copier après la connexion
• 接收的方法。数据都是存储在useLocation中的search获取

  import React from 'react'import { useLocation } from 'react-router-dom'export default ()=> { const location = useLocation() // 页面跳转方法 console.log(location, 'props') return 123}

  Copier après la connexion

  Copier après la connexion
  

2. 使用state的形式，页面刷新不会丢失数据，并且地址栏也看不到数据

• 跳转的方法是使用history.push({pathname: '/personal', state: {test: 'dashboard'}})，其中search键对应的值就是拼接在地址栏的数据

  import React from 'react'import { useHistory } from 'react-router-dom'export default ()=> { const history = useHistory() // 页面跳转方法 history.push({pathname: '/personal', state: { test: 'dashboard' }}) return 123}

  Copier après la connexion
• 接收的方法。数据都是存储在useLocation中的search

  1. Formulaireparams, saut de routage Après le transfert, les paramètres seront affichés dans la barre d'adresse

• La façon de sauter est d'utiliserhistory.push({ pathname : '/personal', recherche : 'test=22222'}), où La valeur correspondant à la clésearchest la donnée épissée dans la barre d'adresse

  import React from 'react'import { useLocation } from 'react-router-dom'export default ()=> { const location = useLocation() // 页面跳转方法 console.log(location, 'props') return 123}

  Copier après la connexion

  Copier après la connexion
• Les données sont stockées danssearchdansuseLocation>Getrrreee

2. Grâce à la forme destate, les données ne seront pas perdues lors du rafraîchissement de la page, et les données ne seront pas visibles dans la barre d'adresse

• La façon de sauter est d'utiliserhistory.push({pathname: '/personal', state: {test: ' Dashboard'}}), où la valeur correspondant à la clésearchest les données épissées dans l'adresse barrrreee
• Méthode de réception. Les données sont stockées dansuseLocationetsearchobtient rrreee Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!