react-router-dom v6.0向路由组件传递params参数无法接收问题

资讯列表页面路由传参代码关键部分

 <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;