如何根据组件中的状态创建 url 链接

Question

我正在尝试创建一个基于组件状态创建的查询链接。当用户选择一个选项时，状态会发生变化，然后用户可以选择“搜索”按钮。然而，搜索按钮上的查询应该根据用户更改的状态。 例如。

/rent/?bedrooms=1&bathrooms=1
/rent/?bedrooms=2&parking=1

const FilterOption = () => {
    const [postCode, setPostCode] = useState();
    const [price, setPrice] = useState();
    const [bedroomCount, setBedroomCount] = useState(0);    
    const [bathroomCount, setBathroomCount] = useState(0);
    const [parkingCount, setParkingCount] = useState(0);
}

Answer 1

您可以使用反应路由器状态来代替查询参数吗？类似的东西

const routeState = {
    postCode,
    price,
    bedroomCount,
    bathroomCount,
    parkingCount,
};
<Link to={{ pathname: "/your-destination-route", state: routeState }}>Go to Details</Link>

然后使用它。

import { useLocation } from 'react-router-dom';
 const { postCode, price, bedroomCount, bathroomCount, parkingCount } = location.state || {};