There are several ways to pass values in react routing

There are three ways to pass values in react routing: 1. "props.params" method. This method can pass one or more values, but the type of each value is a string and cannot pass an object; 2. Query method, this method is similar to the get method in the form. The parameters are passed in clear text, but the parameters will be lost when refreshing the page; 3. State method, this method uses "this.props.match.params.name" when obtaining parameters. , and the refresh page parameters will also be lost.

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

There are several ways to pass values in react routing

There are three ways to pass values in routing

1.props.params (recommended)

//设置路由    import { Router,Route,Link,hashHistory} from 'react-router'; class App extends React.Component { render() { return ( 用户 // 或者 hashHistory.push("/user/sam"); ) } }

When the page jumps to the UserPage page, take out the passed value:

export default class UserPage extends React.Component{ constructor(props){ super(props); } render(){ return(
this.props.match.params.name
) } }

The above method can pass one or more values, but the type of each value is a string, there is no way Pass an object. If passed, you can convert the json object into a string and then pass it over. After passing it, convert the json string into an object and take out the data.

//定义路由  //设置参数 var data = {id:3,name:sam,age:36}; data = JSON.stringify(data); var path = `/user/${data}`; //传值 用户 //或 hashHistory.push(path); //获取参数 var data = JSON.parse(this.props.params.data); var {id,name,age} = data;

2.query (not Recommendation: Refresh page parameters are lost)

query method is very simple to use, similar to the get method in the form, and the parameters are passed in plain text

//定义路由  //设置参数 var data = {id:3,name:sam,age:36}; var path = { pathname:'/user', query:data, } //传值 用户 //或 hashHistory.push(path); //获取参数 var data = this.props.location.query; var {id,name,age} = data;

3.state (not recommended , refresh page parameters are lost)

state mode is similar to post mode, and its usage is similar to query

//设置路由  //设置参数 var data = {id:3,name:sam,age:36}; var path = { pathname:'/user', state:data, } //传值 用户 //或 hashHistory.push(path); //获取参数 var data = this.props.location.state; var {id,name,age} = data;

Special tips:

1, use it when obtaining parameters this.props.match.params.name

2, if you print in a subcomponent, remember to pass this.props, as follows:

class Todolist extends Component { render() { return (  
 
  //不传的话this.props为空对象 
 
  ); } } export default Todolist;

[Related recommendations:javascript video tutorial、web front end】

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