react-router-dom路由跳转时携带参数

在react-router-dom路由跳转时我们可能会遇到携带参数的问题
这里我在查阅了很多资料后分享一个自己比较喜欢的写法

1. state传参

            onClick: event => {
              // 路由传参
              navigate('/detailsHouse', {state:{id:record.id}} )
            },

{state:{id:record.id}}
其中{state:{}}为固有的格式

接受数据时

使用useLocation来拿到数据

import { useLocation } from 'react-router-dom';
    const location = useLocation();
    console.log(location.state.id,'location.state.id');

在这里抛出一个问题

看了很多文章中写用Props接参数可是在使用props后并没有需要的数据