Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to achieve routing parameters in React. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

One of the ways for react components to communicate-routing parameters (react components communicate in a variety of ways, such as props, event callback, context, router, redux, cache, and so on). Now single-page SPA is widely used, without refreshing the whole page to jump part of the page, it is inevitable to use route jump, so react routing in addition to the jump between pages, there is a very important role is to transfer parameters when switching pages or components, so as to achieve the purpose of communication.

We use a simple example to illustrate how react routes jump to pass parameters (this article focuses on routing parameters, routing configuration and related attributes will not be expanded)

Prepare to install routing dependencies:

Npm install-S react-router-dom

Then introduce routing into the page:

Import Home from'. / component/ManageSystem';import {BrowserRouter as Router} from 'react-router-dom'function App () {return (/ / routing package, one or more pages in the first page may need to be routed);} export default App

A certain part of the ManageSystem.js needs to switch the display content. Route is the component to be switched, path is the routing path, exact is the exact match, Link is the link, to represents the redirected routing path, corresponding to the path in Route, and Redirect is redirected.

Import React from 'react';import Loadable from'.. / utils/loadable'import {Route,Link,withRouter,Redirect,Switch} from "react-router-dom"; import {Button} from 'element-react' / / dynamically load components Speed up the first screen rendering const About = Loadable (() = > import ('. / About.js')) const Users = Loadable (() = > import ('. / Users.js')) class Home extends React.Component {render () {return ( About Users {return null}} > ) }} / * the function of withRouter in high-level components is to wrap a component in Route, and then the three objects history, location, and match of react-router will be put into the component's props attribute. * / export default withRouter (Home)

Here comes the point!

When switching routes, there are three main ways to transfer parameters: path dynamic path, query, state.

First of all, path dynamic path method, when setting path, concatenate a dynamic parameter in the address, the following dynamic parameters are: id

When you switch or jump to a page, spell the information you want to pass at the end of the address, such as:

Users

When you switch to Users, you can get the information sent by it through match. The Users.js is as follows

Import React from "react" Class Users extends React.Component {constructor (props) {super (props) this.state = {id: this.props.match.params.id / / get the information passed through path dynamic parameter stitching}} componentDidMount () {console.log (this.props,'users props')} render () {return (I am users: {this.state.id})} export default Users

Get: this.props.match.params.id

You can print the props and look at the contents. It is not difficult to find that this information exists in the props.

Then the corresponding programming jump is:

{this.props.history.push ({pathname:'/ home/users/999'})}} > about / / similarly, use this.props.match.params.id to get the value

The second method of passing parameters is query, which passes the information through the parameter query

Users

Get: this.props.location.query.text

Again, print it out and see

The corresponding programmer jumps are:

{this.props.history.push ({pathname:'/ home/users/999', query: {text: '666'}})}} > Users / / similarly, get the method this.props.location.query.text

The third method of passing parameters is state, which passes the information through the parameter state, which is the same as query.

Users

Get: this.props.location.state.text

Again, print it out and see

The corresponding programmer jumps are:

{this.props.history.push ({pathname:'/ home/users/999', state: {text: '666'}})}} > Users / / similarly, get the method this.props.location.state.text

An important difference between ps:query and state is that after the page jumps, refresh the current page, query will disappear, but state will not disappear, that is, it will still be saved in location.

You might as well test it, make changes to the Users.js page, and if the query does not exist, it says "query has disappeared"

Import React from "react"; class Users extends React.Component {constructor (props) {super (props) this.state = {text: this.props.location.query? This.props.location.query.text: 'query has disappeared'} componentDidMount () {console.log (this.props,'users props')} render () {return (I am users: {this.state.text})}} export default Users

Through the jump, the data is obtained normally, and the query exists.

If you refresh the current page, the query disappears

The page is displayed as

The same process uses state to pass parameters, and the state refresh of the current page in location will not disappear. State is recommended.

This is the end of the article on "how to transfer parameters through routing in React". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.