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 : Le react-router-dom utilisé ici est la version 5 ou supérieure, et le formulaire de routage est en mode history
react-router-domAdresse du document, y compris l'adresse github du package dépendant historyreact-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}

• 接收的方法。数据都是存储在useLocation中的search获取

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

  

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}

• 接收的方法。数据都是存储在useLocation中的search

  1. Formulaire params, 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'utiliser history.push({ pathname : '/personal', recherche : 'test=22222'}), où La valeur correspondant à la clé search est 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}

• Les données sont stockées dans search dans useLocation >Getrrreee

🎜2. Grâce à la forme de state, 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'utiliser history.push({pathname: '/personal', state: {test: ' Dashboard'}}), où la valeur correspondant à la clé search est les données épissées dans l'adresse barrrreee🎜
• Méthode de réception. Les données sont stockées dans useLocation et search obtient 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!