React-基础知识(五)

1.路由传参方式

(1) 通过state传参

传递数据

// 列表页面
import {useNavigate} from 'react-router';

function House() {
  const navigate = useNavigate();
  // 跳转到详情
  const toDetail = (item) => { 
    navigate('/home/detail',{
      // state里放要传递的参数
      state: {
        id: item.id
      }
    })
  }

接收参数

// 详情页面
import {useLocation} from 'react-router';
function List() {
    const location = useLocation();
    console.log(location);
    return ( <div>详情</div> );
}
export default List;

(2) 动态路由传参

配置动态路由(app.js)

 <Route path="/demo2/:id" element={<Demo2 />} />

路由跳转并传参(demo.jsx);

import React from "react";
import { Link } from