react跳转到详情页

1.配置路由

<Route path='/details/:id' component={Details}></Route>

2.传递参数

        <Link to={`/details/${data.id}`}>      传递参数
            <img src={data.img} />
            <div className="mask">
                <div className="left">
                    <p>{data.title}</p>
                    <p>{data.houseType}</p>
                </div>
                <div className="right">
                    <div className="btn">
                        {
                            data.rentType
                        }
                    </div>
                    {/* 把价格的html标签解析 */}
                    <p dangerouslySetInnerHTML={{ __html: data.price + "元/月" }}></p>
                </div>
            </div>
        </Link>

 

3.详情页接收参数

import { useParams } from "react-router-dom";


 const params = useParams()