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

父组件Message

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

class Message extends Component {
    state = {
        messageArr:[
            {id:'001', title:'消息1'},
            {id:'002', title:'消息2'},
            {id:'003', title:'消息3'},
        ]
    }
    render() {
        const {messageArr} = this.state
        return (
            <div>
                <ul>
                    {
                        messageArr.map((msgObj) => {
                            return (
                                <li key={msgObj.id}>
                                    <Link to={`detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
                                </li>
                            )
                        })
                    }
                </ul>
                <hr/>
                <Routes>
                    <Route path="detail/:id/:title" element={<Detail/>}/>
                </Routes>
            </div>
        );
    }
}

export default Message;

子组件Detail，需要使用函数式组件才能接受路由的params参数

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

export const Detail = () => {
    const data = [
        {id:'001',content:'你好1'},
        {id:'002',content:'你好2'},
        {id:'003',content:'你好3'}
    ]
    //使用useParams接受参数，params是个对象
    const params = useParams()
    console.log('detail组件params参数：', params)
    return (
        <ul>
            <li>ID:{params.id}</li>
            <li>TITLE:{params.title}</li>
            <li>CONTENT:{data.find(i => i.id === params.id).content}</li>
        </ul>
    )
}