React router v6版本实现params传参

import React, { Component } from 'react'
import { Link,Routes,Route, useParams } from 'react-router-dom'
import Detail from './Detail'


export default class Messages extends Component {
    state ={messageArr:[
        {id:'1',title:'消息1'},
        {id:'2',title:'消息2'},
        {id:'3',title:'消息3'},
    ]}
   
    render() {
        const {messageArr} = this.state
        return (
            <div>

                <ul>
                {
                    messageArr.map((messageObj)=>{
                        return <li key={messageObj.id}>
                            <Link to={`detail/${messageObj.id}/${messageObj.title}`}>{messageObj.title}</Link>
                        </li>
                    })
                }
                </ul>
                <hr />
                <div>
                    <Routes>
                    	//动态绑定id和title进行params传参
                        <Route path="detail/:id/:title" element={<Detail/>}>
                        </Route>
                    </Routes>
                </div>
            </div>
            
        )
    }
}

import {useParams} from 'react-router-dom'

import React from 'react'
//这里定义函数组件，v6版本的useParams不支持在类组件中使用
export default function Detail() {
    
    const DetailData =[
        {id:'1',content:'你好，上海'},
        {id:'2',content:'你好，北京'},
        {id:'3',content:'你好，广州'},
    ]
    //获取参数
    const params = useParams()
    //解构赋值
    const {id,title} = params
    //find()函数通过id找到对应的content
    const deatilContent = DetailData.find((detailObj)=>{
        return detailObj.id === id
    })
    return (
        <ul>
            <li>ID:{id}</li>
            <li>title:{title}</li>
            <li>content:{deatilContent.content}</li>
        </ul>
    )
    
}