Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "what are the ways of react route jump". The editor shows you the operation process through an actual case, the operation method is simple, fast and practical. I hope this article "what are the ways of react route jump" can help you solve the problem.

Method: 1, using params, parameters will be displayed in the address bar, syntax "({pathname:...,search: address bar data})"; 2, using state, address bar can not see data, syntax "({pathname:...,state: {test:...}}").

The operating environment of this tutorial: Windows10 system, react17.0.1 version, Dell G3 computer.

What are several ways to jump react routes?

Note: the react-router-dom used here is above version 5, and the routing form is history mode.

React-router-dom document address, which depends on the github address of the package history

1. Params format. After the route is redirected, 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 value of the search key is the data spliced in the address bar

Import React from 'react'import {useHistory} from' react-router-dom'export default () = > {const history = useHistory () / / Page Jump method history.push ({pathname:'/ personal', search: 'test=22222'}) return 123}

The method of receiving. The data are all obtained by search stored in useLocation.

Import React from 'react'import {useLocation} from' react-router-dom'export default () = > {const location = useLocation () / / Page Jump method console.log (location, 'props') return 123}

two。 In the form of state, the page refresh does not lose data, and the address bar does not see the data

The way to jump is to use history.push ({pathname:'/ personal', state: {test: 'dashboard'}}), where the value of the search key is the data spliced in the address bar

Import React from 'react'import {useHistory} from' react-router-dom'export default () = > {const history = useHistory () / / Page Jump method history.push ({pathname:'/ personal', state: {test: 'dashboard'}}) return 123}

The method of receiving. The data are all obtained by search stored in useLocation.

Import React from 'react'import {useLocation} from' react-router-dom'export default () = > {const location = useLocation () / / Page Jump method console.log (location, 'props') return 123}

This is the end of the content about "what are the ways of react routing jump". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.