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)

//设置路由
 <Router history={hashHistory}>
    <Route path=&#39;/user/:name&#39; component={UserPage}></Route>
 </Router>
import { Router,Route,Link,hashHistory} from &#39;react-router&#39;;
class App extends React.Component {
  render() {
    return (      
        <Link to="/user/sam">用户</Link>
        // 或者
        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(<div>this.props.match.params.name</div>)
    }
}

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.

//定义路由
<Route path=&#39;/user/:data&#39; component={UserPage}></Route>
//设置参数
var data = {id:3,name:sam,age:36};
data = JSON.stringify(data);
var path = `/user/${data}`;
//传值
<Link to={path}>用户</Link>
//或
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

//定义路由
<Route path=&#39;/user&#39; component={UserPage}></Route>
//设置参数
var data = {id:3,name:sam,age:36};
var path = {
  pathname:&#39;/user&#39;,
  query:data,
}
//传值
<Link to={path}>用户</Link>
//或
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

//设置路由
<Route path=&#39;/user&#39; component={UserPage}></Route>
//设置参数
var data = {id:3,name:sam,age:36};
var path = {
  pathname:&#39;/user&#39;,
  state:data,
}
//传值
<Link to={path}>用户</Link>
//或
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 (
           <DocumentTitle title="todolist">
           <div id="home-container">   
           <section>
              <TodolistList {...this.props}/> //不传的话this.props为空对象
           </section>                   
           </div>
           </DocumentTitle>
       );
    }
 }
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!