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 > < / li >)})} < / ul > < hr / > {/ * registered to receive routing statement params*/} <Switch> <Route path='/home/message/detail/:id/:title' component={Detail}></Route> </Switch> </div> ) } }JSX file to receive parameter component:
Import React, {Component} from 'React' const detailData = [{id:'01',content:' Hello China '}, {id:'02',content:' Hello China ', }, {id:'03',content:' Hello, Export default class Detail extends Component {render() {// receive params const {id,title} = this.props.match.params 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> ) } }