props in route@5

1. Pass the params parameter

   There are three ways to carry parameters in ajax: query, params, body. The body parameter has two encoding forms: urlencoded and json. There is also a params form in routing components, that is, parameters are placed directly in the path.

   The parameter is placed directly in the path of the navigation link, and the params parameter is passed to the routing component. Data that cannot be placed can be placed in the state of the sub-route. The path of the routed component is also declared to receive, and is declared using the express syntax in Node.js.

   When is received, the passed parameters can be found in props.match.params (in React 5.3.1). props is the history object.

   
   

   Parent component (carrying parameters, declared to receive)

   state = {msgArr:[{id:'01', title:'message1'},
            {id:'02', title:'message2'},
            {id:'03', title:'message3'}]};
   const {msgArr} = {this.state};
   msgArr.map(msgObj => {return(
   <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
              )}); //carry parameters
   <Route path='/home/message/detail/:id/:title' component={Detail}/> //node writing, declare to receive

   
   

   Routing component (receiving parameters)

   const DetailData = [{id:'01', content:'Hello, Australia'},
                      {id:'02', content:'Hello, Tasmania'},
                      {id:'03', content:'Hello, Hobart'}]
   const {id,title} = this.props.match.params; //Receive parameters
   const findResult = DetailData.find(detailObj => {
       return detailObj === id
   })
   return(
       <ul>
           <li>ID:{id}</li>
           <li>Title:{title}</li>
           <li>Content:{findResult.content}</li>
       </ul>
   )

   
   

   Summarize

   Route link (with parameters): <Link to='/demo/test/tom/18'>Details</Link>

   Register route (declare parameters): <Route path='/demo/test/:name/:age' component={test}/>

   Receive parameters: const {id,title} = this.props.match.params

   
   

2. Pass the search parameter

   Similar to the routing component passing params parameters, it is the same as the query syntax in ajax, namely ?id=01&title=xx1 (urlencoded encoding form, namely key=value&key=value, but there is an extra ?). The search parameter does not need to be declared in the routing component path to receive.

   When received, the passed parameters can be found in props.match.location.search (in React 5.3.1). The format of the parameter here is search:"?id=01&title=xx1", that is, a string format rather than an object format. This string can be processed into an object format by itself, or processed by the querystring library (qs library).

   The querystring library (qs library) has two utility methods. qs.stringify(obj) converts the object into urlencoded encoding form, and qs.parse(urlencoded) converts the urlencoded encoding into an object. Note here that the search parameter has one more ? than urlencoded.

   
   

   Parent component (carrying parameters, declaring receiving), Note that the search parameter does not need to declare receiving, just register the route normally.

   msgArr.map(msgObj => {return(
   <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> //carry parameters
              )});
   <Route path='/home/message/detail' component={Detail}/> //declare receiving

   Subcomponent (receives parameters)

   const {search} = this. props. location;
   const {id,title} = qs.parse(search.slice(1)); //urlencoded to object, and remove redundant?
   //Others are the same as the params method

   
   

   Summarize

   routing link (carrying parameters): <Link to='/demo/test?name=tom&age=18'>details</Link>

   Register route (declare parameters): <Route path='/demo/test' component={test}/>

   Receiving parameters: this.props.location.search

   Remarks: The obtained search is a urlencoded encoded string, which needs to be parsed with the help of querystring. One more? Need to remove.

   
   

3. Pass the state parameter

   The state here is a unique property of the routing component, not the state of the component. Both the params and search delivery methods will display the passed data in the address bar, but the state method will not.

   
   

   Passing the state parameter requires writing the to= in the navigation link as an object ({{}}). The state parameter does not need to be declared received in the route component path.

   When received, the passed parameters can be found in props.match.location.state and are in object format.

   
   

   Parent component (carrying parameters, declaring to receive), Note that the state parameter does not need to be declared to receive, just register the route normally.

   <Link to={{pathname:'/home/message/detail',state:{id:msgObj.id, title:msgObj.title}}}>{msgObj.title}</Link> //carrying parameters
   <Route path='/home/message/detail' component={Detail}/> //declare receiving

   Subcomponent (receives parameters)

   const {id,title} = this.props.location.state;
   const findResult = DetailData.find(detailObj => {
       return detailObj === id
   }) //No change, just for follow-up comparison.
   //Others are the same as the params method

   
   

   There is a problem here, that is, the params and search methods both have parameters in the address bar, and the address bar still has parameters after refreshing, so the subcomponent data will not be lost. However, there are no parameters in the address bar of the state method, and there are no parameters in the address bar after refreshing, and the subcomponent data is not lost. The principle implemented here is that when using BrowserRouter, it has been operating the history in the browser and maintaining history.XXX. And location is an attribute in history (React 5.3.1 is shorthand, if not shorthand, there is location in history).

   
   

   At this time, if the browser cache is cleared (clear history), and then refresh, the page cannot be rendered and an error (undefined error) is reported. Therefore, adding a ||{} to the child component will not report an error.

   const {id,title} = this.props.location.state||{};
   const findResult = DetailData.find(detailObj => {
       return detailObj === id
   })||{}
   //Others are the same as the params method

   After the change, the refresh will not report an error, but it will display empty data.

   
   

   Summarize

   Route link (with parameters): <Link to={{pathname:'/demo/test',state:{name:'tom, age:18'}}} >Details</Link>

   Register route (declare parameters): <Route path='/demo/test/:name/:age' component={test}/>

   Receive parameters: this.props.location.state

   Note: Refresh can also keep parameters.