资讯列表页面路由传参代码关键部分
<Link to={`/home/message/detail?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>
<Routes>
{/**声明接收params参数 */}
<Route path="detail/:id/:title" element={<Detail />}></Route>
</Routes>
详情界面接收部分,如果用的是v6.0版本的话,类组件中无法从props中接收到传递的参数,比较简单 的取值方式就是将类组件改为函数组件。使用useParams来接收即可。
import React from "react";
import { useParams } from 'react-router-dom';
const detailData = [
{ id: "1", content: "你好,中国",title:"苹果" },
{ id: "2", content: "你好,小可爱",title:"苹果" },
{ id: "3", content: "你好,未来的你",title:"苹果" },
];
const Detail = () => {
const params = useParams();
const findResult=detailData.find((detailObj)=>{
return detailObj.id===params.id
})
return (
<div>
<ul>
<li>ID:{findResult.id}</li>
<li>TITLE:{findResult.title}</li>
<li>CONTENT:{findResult.content}</li>
</ul>
</div>
);
}
export default Detail;