There are three commonly used ways to pass parameters. Examples show how these three methods are used:
The component that passes the parameters
import React, { Component } from 'react' import { Switch,Route,Link } from 'react-router-dom' import Detail from './Detail' export Default class Message extends Component {state ={Message :[{id:'01',title:' 1'}, {id:'02',title:' 2'}, } render() {const {messageArr} = this.state return (<div bb0 <ul> {messageArr. Map ((msgObj) =>{return ()) {id:'03',title:' message 3'}]} render() {const {messageArr} = this.state return (<div bb0 <ul> {messageArr. Return (<li key={msgoj. id}> {/* pass params */} {/* <Link To = {` / home/message/detail / ${msgObj. Id} / ${msgObj. Title} `} > {msgObj. Title} < / Link > * /} {/ * * / routing component to transfer the search parameters} {/ * < Link to={`/home/message/detail/? Id = ${msgObj. Id} & title = ${msgObj. Title} `} > {msgObj. Title} < / Link > * /} {/ * * / routing component to transfer the state parameters} < Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link> </li> ) }) } </ul> < hr / > {/ * registered routing * /} < Switch > {/ * statement receive params * /} {/ * < the Route path = "/ home/message/detail / : id / : the title ' Component ={Detail}></Route> */} {/* search is not required */} {/* <Route path='/home/message/ Detail ' Component ={Detail}></Route> */} {/* state */} <Route path='/home/message/ Detail 'component={Detail}></Route> </Switch> </div> ) } }The component that receives the parameters
Import React, {Component} from 'React' import QS from 'QueryString' const detailData = [{id:'01',content:' Hi, China '}, {id: '02', content: 'hello, Shanghai'}, {id: '03, content:' hello, Export default class Detail extends Component {render() {// const {id,title} = This.props. Match.params // Recepts the search parameter // const {search} = this.props. Location // const {id,title} = Qs. Parse (search. Slice (1)) / / receiving state parameters of const {id, title} = this. Props. The location. The state / / find the corresponding content of id const findResult = detailData.find((detailObj)=>{ return detailObj.id === id }) return ( <div> <li>ID:{id}</li> <li>Title:{title}</li> <li>Content:{findResult.content}</li> </div> ) } }