React passes the search parameter to the routing component

The JSX file to pass the parameter component:

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 > < / li >)})} < / ul > < hr / > {/ * registered routing * /} < Switch > {/ * statement Params * /} {/ * < the Route path = "/ home/message/detail / : id / : the title of 'component = {detail} > < / Route > * /} {/ * search parameters without declaration receive * /} <Route path='/home/message/detail' component={Detail}></Route> </Switch> </div> ) } }

JSX file to receive parameter component:

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 // Receives search parameter const {search} = this.props. Location const {id,title} = Parse (search. Slice (1)) // find((detailObj)=>{return detailObj. ID === id }) return ( <div> <li>ID:{id}</li> <li>Title:{title}</li> <li>Content:{findResult.content}</li> </div> ) } }