React停车场预约：如何将参数传递至独立URL的表单？

当前问题快速解决：URL查询参数传递 #

这是最直接适配你当前场景的方案，修改现有代码即可实现：

1. 修改ParkingMap的导航逻辑 #

更新handleSubmit函数，将选中的车位ID和日期作为查询参数拼接到URL中，同时修正Button的事件绑定（Button应使用onClick而非onSubmit）：

const handleSubmit = (e) => {
    e.preventDefault();
    // 拼接查询参数跳转
    navigate(`/home/booking?spot=${spot}&date=${date}`);
};

// 对应Button修改
<Button variant="contained" onClick={handleSubmit}> Next </Button>

2. 在BookingForm中获取并展示参数 #

使用react-router-dom的useSearchParams钩子读取URL中的参数：

import { useNavigate, useSearchParams } from 'react-router-dom';

export default function BookingForm(){
    const navigate = useNavigate();
    const [searchParams] = useSearchParams();
    
    // 提取URL参数
    const spot = searchParams.get('spot');
    const date = searchParams.get('date');
    
    // ...原有代码

    return (
        <div className='flex-container'>
            {/* ...原有代码 */}
            <div className='row'>
                <header>      
                    <div>
                        {/* 展示传递的参数 */}
                        <h2> Spot # {spot} <br/> Date {date} <br/> Time </h2>
                    </div>
                </header>
            </div>
            {/* ...原有代码 */}
        </div> 
    );
};

其他可行方案对比 #

根据项目规模和需求，还可以选择以下方案：

1. React Router State传递 #

参数不会暴露在URL中，适合不需要用户看到参数的场景，但刷新页面后state会丢失：

• 修改ParkingMap导航：

const handleSubmit = (e) => {
    e.preventDefault();
    navigate('/home/booking', {
        state: { spot, date }
    });
};

• BookingForm中获取：

import { useNavigate, useLocation } from 'react-router-dom';

export default function BookingForm(){
    const navigate = useNavigate();
    const location = useLocation();
    const { spot, date } = location.state || {};
    
    // ...原有代码，直接使用spot和date展示
};

2. 全局状态管理（Context API/Redux） #

适合需要在多个组件间共享预约数据，或需要持久化的场景：
以Context API为例：

1. 创建全局Context：

// ParkingContext.js
import { createContext, useState, useContext } from 'react';

const ParkingContext = createContext();

export function ParkingProvider({ children }) {
    const [selectedParking, setSelectedParking] = useState({ spot: null, date: '' });
    return (
        <ParkingContext.Provider value={{ selectedParking, setSelectedParking }}>
            {children}
        </ParkingContext.Provider>
    );
}

export function useParking() {
    return useContext(ParkingContext);
}

2. 在根组件包裹ParkingProvider：

// App.jsx
import { ParkingProvider } from './ParkingContext';
import { BrowserRouter } from 'react-router-dom';

function App() {
    return (
        <BrowserRouter>
            <ParkingProvider>
                {/* 你的路由和组件 */}
            </ParkingProvider>
        </BrowserRouter>
    );
}

3. ParkingMap中更新状态：

import { useParking } from './ParkingContext';

export default function ParkingMap(){
    const { setSelectedParking } = useParking();
    // ...原有代码

    const changeSpot = (e) => {        
        const spotId = e.target.id;
        setSelectedParking(prev => ({ ...prev, spot: spotId }));
        setIsActive(current => !current);
    };

    const handleChange = (e) => {
        const selectedDate = e.target.value;
        setSelectedParking(prev => ({ ...prev, date: selectedDate }));
        setDate(selectedDate);
    };
};

4. BookingForm中读取状态：

import { useParking } from './ParkingContext';

export default function BookingForm(){
    const { selectedParking } = useParking();
    const { spot, date } = selectedParking;
    // ...原有代码展示参数
};

3. 本地存储（localStorage/sessionStorage） #

适合需要持久化数据，或跨页面刷新保留参数的场景：

• ParkingMap中存储数据：

const handleSubmit = (e) => {
    e.preventDefault();
    localStorage.setItem('selectedParking', JSON.stringify({ spot, date }));
    navigate("/home/booking/");
};

• BookingForm中读取数据：

import { useState, useEffect } from 'react';

export default function BookingForm(){
    const [selectedParking, setSelectedParking] = useState({ spot: null, date: '' });

    useEffect(() => {
        const savedData = localStorage.getItem('selectedParking');
        if(savedData){
            setSelectedParking(JSON.parse(savedData));
            // 可选：读取后删除，避免重复读取
            localStorage.removeItem('selectedParking');
        }
    }, []);

    const { spot, date } = selectedParking;
    // ...原有代码展示参数
};

内容的提问来源于stack exchange，提问作者pengali777