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> */}
{/* 向路由组件传递search参数 */}
{/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}
{/* 向路由组件传递state参数 */}
<Link to={`/home/message/detail/`} state={{id:msgObj.id,title:msgObj.title}}>{msgObj.title}</Link>
</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