What are the several ways to jump in react routing?

Method: 1. Use params, the parameters will be displayed in the address bar, the syntax is "...({pathname:...,search:address bar data})"; 2. Use state, view in the address bar No data, syntax "...({pathname:...,state:{test:...}}".

This tutorial operation Environment: Windows 10 system, react version 17.0.1, Dell G3 computer.

What are the several methods of react routing jump

Note: The used here react-router-dom is version 5 or above, the routing form is historymode
react-router-dom document address, which depends on the package history's github address

1. In the form of params, after the route jumps, the parameters will be displayed in the address bar

• The way to jump is to use history.push({pathname: '/personal', search: 'test=22222'}), where the search key corresponds The value is the method of receiving the data

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

  Copy after login
• spliced ​​in the address bar. The data is stored in useLocationsearchGet

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

  Copy after login

  Copy after login
  

2. Using the form of state, the data will not be lost when the page is refreshed, and the data will not be visible in the address bar.

• Jump The method is to use history.push({pathname: '/personal', state: {test: 'dashboard'}}), where the value corresponding to the search key is spliced ​​into the address The method for receiving column data

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

  Copy after login
• . The data is stored in useLocation search Get

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

  Copy after login

  Copy after login
  

Recommended Study: "react video tutorial"

The above is the detailed content of What are the several ways to jump in react routing?. For more information, please follow other related articles on the PHP Chinese website!