React-Router V6 params/research/state传参 函数式组件

V6版本中类组件中无法从props中接收到传递的参数
解决方法：

• 将类组件改为函数组件；
• 使用useParams()和useLocation()接收参数；

pages/Home/Message

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

export default class Message extends Component {

    state = {
        messageArr: [
            { id: '01', title: 'message1' },
            { id: '02', title: 'message2' },
            { id: '03', title: 'message3' },
        ]
    }

    render() {
        const { messageArr } = this.state
        return (
            <div>
                <ul>
                    {
                    messageArr.map((msgObj) => {
                        return (
                            <li key={msgObj.id}>
                                {/* 向路由组件传递params参数 */}
                                {/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>&nbsp;&nbsp; */}

                                 {/* 向路由组件传递search参数 */}
                                 {/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>&nbsp;&nbsp; */}

                                  {/* 向路由组件传递state参数 */}
                                  <Link to={`/home/message/detail/`} state={{id:msgObj.id,title:msgObj.title}}>{msgObj.title}</Link>&nbsp;&nbsp;
                            </li>
                        )
                    })
                    }
                </ul>
                <hr />
                <Routes>
                    {/* 声明接收params参数 */}
                    {/* <Route path="/detail/:id/:title" element={<Detail/>} /> */}

                     {/* search参数无需声明接收，正常注册路由即可 */}
                     {/* <Route path="/detail" element={<Detail/>} /> */}

                     {/* state参数无需声明接收，正常注册路由即可 */}
                     <Route path="/detail" element={<Detail/>} />
                </Routes>
            </div>
        )
    }
}

pages/Home/Message/Deatil

import React, { Component } from 'react'
import { Link, Route, Routes, useLocation, useParams } from 'react-router-dom'
import qs from 'qs'   //引入querystring


const detailData = [
    { id: '01', content: '我来自未来' },
    { id: '02', content: '未来很精彩' },
    { id: '03', content: '阿凡达10上映了' }
]


/* let obj={name:'tome',age:18}
console.log(qs.stringify(obj));    //name=tome&age=18

let str='carName=奔驰&price=1999999'
console.log(qs.parse(str));    //{carName: '奔驰', price: '1999999'} */


//使用函数式编程：export default class Detail extends Component改写为：const Detail+export default detail
const Detail = () => {

    //接收params参数，使用useParams()
    /*  const params = useParams();
    const {id,title} = params */

    //接收search参数，使用useLocation()，log一下接收到的形式是?id=01&title=message1，要把？去掉
    /* const {search} = useLocation()
    const {id,title}=qs.parse(search.slice(1)); */

    //接收state参数(解构赋值)，使用useLocation()，log一下接收到的形式是?id=01&title=message1，要把？去掉
    const {state:{id,title}}=useLocation();


    //比对接收参数和detailData
    const findResult = detailData.find((detailObj) => {
        return detailObj.id === id
    })

    return (
        <div>
            <ul>
                <li>ID:{id}</li>
                <li>TITLE:{title}</li>
                <li>CONTENT:{findResult.content}</li>
            </ul>
        </div>
    )
}
export default Detail

标签：传参,const,title,research,React,state,参数,msgObj,id
来源： https://blog.csdn.net/weixin_45029697/article/details/123045056