react-router-dom v6版本路由传参【params】

react官方太任性了，为了推荐函数式组件，最新版路由传参似乎必须使用函数式组件

 父组件 <Message/> :

import React, { Component } from 'react'
import { Link, Route,Routes} from 'react-router-dom'
import {Detail} from './Detail'export default class Message extends Component {state = {list: [{ id: '001', title: '消息1' },{ id: '002', title: '消息2' },{ id: '003', title: '消息3' }]}render() {return (<div><ul>{this.state.list.map(i => (<li key={i.id}>{/* 向路由组件传递params参数，直接拼 */}<Link to={`/home/message/detail/${i.id}/${i.title}`}>{i.title}</Link></li>))}</ul><hr /><Routes>{/* 声明接收params参数 */}<Route path='detail/:id/:title' element={<Detail/>}></Route></Routes></div>)}
}

子组件 <Detail/> ：

import React, { Component } from 'react'
import { useParams } from 'react-router-dom'export const Detail = () => {const data = [{id:'001',content:'你好，中国'},{id:'002',content:'你好，未来'},{id:'003',content:'你好，小彭'}]const params = useParams()console.log('detail组件参数：', params)return (<ul><li>ID:{params.id}</li><li>TITLE:{params.title}</li><li>CONTENT:{data.filter(i => i.id == params.id)[0].content}</li></ul>)
}

教程里面老师用的都是类式组件，api也都是v5的，学的好蓝瘦