Three ways to react router page transfer values

This article mainly introduces react Router how to pass values after defining a route, about react and react Router
Please refer to Mr. Ruan's blog for the Basics

Note: This article sample react router version is: 3.0.2, please note check version before use

I. Props.params

Official example when using react router to define a route, we can assign a path to <Route> and then specify that the wildcard character can carry parameters to the specified path:
First define routing to userpage pages:

Import {router,route,hashhistory} from ' React-router ';

Class App extends React.component {
  render () {return
    (
        <router history={hashhistory}>
            < Route path= '/user/:name ' component={userpage}></route>
        </Router>
  }
}

Parameter name specified above
Use:

Import {link,hashhistory} from ' React-router ';

1.Link Component Implementation Jump:

<link to= "/user/sam" > User </Link>

2.history Jump:

Hashhistory.push ("/user/sam");

When the page jumps to the userpage page, remove 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 a string and cannot pass an object, and if passed, converts the JSON object to a string, passes the past, passes the past, and then converts the JSON string into an object to remove the data
For example: Define a route:

<route path= '/user/:d ata ' component={userpage}></route>

Use:

var data = {id:3,name:sam,age:36};
data = json.stringify (data);
var path = '/user/${data} ';

1.<link to={path}> User </Link>

2.hashhistory.push (path);

Get Data:

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

When you jump to a userpage page in this way, you can pass the argument only by passing a string, is there another way to gracefully pass the object directly instead of just a string? two. Query

Query method is simple to use, similar to the Get method in the form, passing parameters to plaintext:
First define the route:

<route path= '/user ' component={userpage}></route>

Use:

var data = {id:3,name:sam,age:36};
var path = {
  pathname: '/user ',
  query:data,
}

1.<link to={path}> User </Link>

2.hashhistory.push (path);

Get Data:

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

Query can pass any type of value, but the URL of the page is also spliced by the value of query, the URL is very long, then there is no way similar to the form POST method of passing data so that the transmitted data is not transmitted in clear text. three. State

The state approach is similar to post, and is similar to query,
First define the route:

<route path= '/user ' component={userpage}></route>

Use:

var data = {id:3,name:sam,age:36};
var path = {
  pathname: '/user ',
  state:data,
}

1.<link to={path}> User </Link>

2.hashhistory.push (path);

Get Data:

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

State mode can still pass any type of data, and it can be transmitted without plaintext.

You can compare the URL of the address bar after implementation to observe the difference between three types of URL