1. Pass Params parameters to the routing component
1.1. Usage:
1.1.1. How to write the routing link.
Add the parameters to be passed in the URL of the routing link.
Add the / parameter after the path
. For example, we want to pass a tom,18
<Link to={
`/home/message/detail/tom/18`}>{
msgObj.title}</Link>
1.1.2. How to write a registered route.
Declare the parameters to be accepted in the path of the registered route.
Add / after the path: the name of the parameter to be accepted (this name can be chosen casually, it is only used to receive parameters)
<Route path="/home/message/detail/:name/:age" component={
Detail}/>
1.1.3. How to receive the params parameter.
The params parameter is in this.props.match.params.
The attribute name is the same as the name you declared.
const {
name,age} = this.props.match.params
2. Pass search parameters to the routing component
2.1. Usage:
2.1.1. How to write the routing link.
Add the parameters to be passed in the url of the routing link.
Add /?parameter name=parameter value after the path.
If there are multiple parameters, add them after the first parameter value. & then continue to write parameters.
For example, we want to pass a tom,18
<Link to={
`/home/message/detail/?name=tom&age=18`}>{
msgObj.title}</Link>
2.1.2. How to write registration route
: Just register normally, no need to declare receipt
<Route path="/home/message/detail" component={
Detail}/>
2.1.3. How to receive search parameters. The
search parameters are in this.props.location.
The content is?name=tom&age=18. This format is called urlencoded and
needs to be processed by us. It is recommended to use the querystring tool and
directly introduce the tool.
import qs from 'qs' //老版本引入 querystring
Final writing
const {
search } = this.props.location
const {
id,title} = qs.parse(search.slice(1))
//由于第一个字符是？，所以使用 slice 方法去除第一个字符
3. Pass state parameters to routing components
3.1. Usage:
3.1.1. How to write routing links.
Pass an object to to. The object has two attributes:
the first attribute pathname: routing address.
The second attribute state: an object in which the parameters you want to pass are written.
<Link to={
{
pathname:'/home/message/detail',state:{
name:'tom',age:18}}}>{
msgObj.title}</Link>
3.1.2. How to write registration route
: Just register normally, no need to declare receipt
<Route path="/home/message/detail" component={
Detail}/>
3.1.3. How to write receiving parameters.
The state parameter is in this.props.location.state.
const {
name,age} = this.props.location.state
Personal blog: study notes for the rest of my life