How to pass value to page in react

Methods for page value transfer in react: 1. Use the [props.params] method, the code is []; 2. It is very simple to use the query method, similar to the get method in the form, passing Parameters are in clear text.

Methods for page value transfer in react:

1. props.params

Official example When using React router to define a route, we can specify a path for , and then specify wildcards to carry parameters to the specified path:

First define the route to UserPage Page:

import { Router,Route,hashHistory} from 'react-router';
class App extends React.Component {
  render() {
    return (
        <Router history={hashHistory}>
            <Route path=&#39;/user/:name&#39; component={UserPage}></Route>
        </Router>
    )
  }
}

The parameters specified above are one parameter name

Use:

import {Link,hashHistory} from 'react-router';

1. Link component to achieve jump:

<Link to="/user/sam">用户</Link>

2. History jump :

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.params.name</div>)
    }
}

The above method can pass one or more values, but the type of each value is character String cannot pass an object. If you pass it, 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.

For example: define routing:

<Route path=&#39;/user/:data&#39; component={UserPage}></Route>

Use:

var data = {id:3,name:sam,age:36};
data = JSON.stringify(data);
var path = `/user/${data}`;
<Link to={path}>用户</Link>
hashHistory.push(path);

Get data:

var data = JSON.parse(this.props.params.data);
var {id,name,age} = data;

When you jump to the UserPage page in this way, you can only pass parameters by passing a string, so are there any other What about a way to elegantly pass objects directly instead of just strings?

2. Query

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

First define the route:

<Route path=&#39;/user&#39; component={UserPage}></Route>

Use:

var data = {id:3,name:sam,age:36};
var path = {
  pathname:'/user',
  query:data,
}
<Link to={path}>用户</Link>
hashHistory.push(path);

Get data:

var data = this.props.location.query;
var {id,name,age} = data;

query method can pass any type of value, but the URL of the page is also spliced ​​by the query value, and the URL is very long , so is there a way to pass data similar to the form post method so that the passed data is not transmitted in clear text?

3. State

The state method is similar to the post method, and its usage is similar to query.

First define the route:

<Route path=&#39;/user&#39; component={UserPage}></Route>

Use:

var data = {id:3,name:sam,age:36};
var path = {
  pathname:'/user',
  state:data,
}
<Link to={path}>用户</Link>
hashHistory.push(path);

Get data:

var data = this.props.location.state;
var {id,name,age} = data;

The state method can still transfer any type of data, and it can not be transmitted in clear text.

You can compare the URL in the address bar after implementation to observe the difference between the URLs of the three value-passing methods

Related learning recommendations: javascript learning tutorial

The above is the detailed content of How to pass value to page in react. For more information, please follow other related articles on the PHP Chinese website!