There are three ways to pass values in react routing: 1. "props.params" method, which can pass one or more values, but the type of each value is a string and cannot pass an object; 2. query method, which The 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. When obtaining parameters, "this.props.match.params.name" must be used in this method, and the parameters when refreshing the page will also be lost. will be lost.
The operating environment of this tutorial: Windows 10 system, react version 17.0.1, Dell G3 computer.
There are three ways to pass values in routes:
1.props.params (recommended)
//Set routing <Router history={hashHistory}> <Route path='/user/:name' component={UserPage}></Route> </Router>import { Router,Route,Link,hashHistory} from 'react -router';class App extends React.Component { render() { return ( <Link to="/user/sam">user</Link> // or 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, and an object cannot be passed. If it is passed, the json object can be converted into a string, and then passed over. After passing it, the json Convert string to object and take out data
//Define route <Route path='/user/:data' component={UserPage}></Route>//Set parameters var data = {id:3,name:sam,age:36};data = JSON. stringify(data);var path = `/user/${data}`;//Pass value <Link to={path}>user</Link>//or hashHistory.push(path);//Get parameter var data = JSON.parse(this.props.params.data);var {id,name,age} = data;2.query (not recommended: refresh page parameters are lost)
The query method is very simple to use, similar to the get method in the form, and the parameters are passed in plain text.
//Define route <Route path='/user' component={UserPage}></Route>//Set parameters var data = {id:3,name:sam,age:36};var path = { pathname:' /user', query:data,}//Pass value <Link to={path}>user</Link>//or hashHistory.push(path);//Get parameter var data = this.props.location.query ;var {id,name,age} = data;3.state (not recommended, refresh page parameters are lost)
The state mode is similar to the post mode, and its usage is similar to query.
//Set routing <Route path='/user' component={UserPage}></Route>//Set parameters var data = {id:3,name:sam,age:36};var path = { pathname:' /user', state:data,}//Pass value <Link to={path}>user</Link>//or hashHistory.push(path);//Get parameter var data = this.props.location.state ;var {id,name,age} = data;Special tips:
1. Use this.props.match.params.name when getting parameters.
2. If printing 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}/> //If not pass this .props is an empty object </section> </div> </DocumentTitle> ); } }export default Todolist;