• • 此问题在此处已有答案**：

How to pass data from a page to another page using react router（5个答案）
21小时前关门了。
我在url "/home "上有一个停车场，用户要选择一个日期，然后选择一个地点，然后单击一个按钮（" book a spot "），将他们重定向到"/home/book"。在此页面上，向用户呈现一个表单，该表单应该呈现用户在上一个url/页面（"/home "）中选择的日期，时间和停车地点。
如何将这些参数从"/home "传递到"/home/book"上的表单？如果这不是理想的方法，那应该怎么做？
工作原理：我可以看到停车位的"id"，以及，用户选择的"日期"。
停车场Map代码

export default function ParkingMap(){    
    
    const navigate = useNavigate(); // the navigation hook
    const [data, setData] = useState(null);
    const [date, setDate] = useState('');
    const dateInputRef = useRef(null);
    const [isActive, setIsActive] = useState(false);
    const [spot, setSelectedSpot] = useState(null);

    useEffect(() => {
        getSpots();
    }, []);

    function getSpots() {
       fetch('http://localhost:3001/parking-data/') 
        .then(response => {
            return response.json();
        })
        .then(data => { 
        console.log("data " + data)
        setData(data);              
        });
    }

    if( !data ){
        return <div/>  
    }

    const parkingSpots = data.data.parking_spots;
    console.log(parkingSpots);

    const handleChange = (e) => {
        setDate(e.target.value);
    };

    const changeSpot = (e) => {        
        console.log("target id is " + e.target.id) // returns the spot selected
        setSelectedSpot(e.target.id);
        setIsActive(current => !current);
        console.log(" passed the setIsActive code ");
    };

    // this doesnt work lol
    const handleSubmit = (e) => {
        e.preventDefault();
        navigate("/home/booking/");
    };

    return (
        <div>
            <h1>Selected Date: {date} </h1> // need the selected date from here
            <input
                    type="date"
                    onChange={handleChange}
                    ref={dateInputRef}
            />   
            <div class="flex-container-parking">
                <div class="flex-parking-left">                  
                    <div 
                        className='parkingSpot'
                        id="5" 
                        onClick={changeSpot}
                        style={{ 
                            backgroundColor: parkingSpots.find(ps => ps.parking_spot_number === 5 && ps.occupancy === true) ? 'lightgrey' : 'lightblue',
                            borderColor: isActive ?  'green' : 'red'
                            }}>
                        <div className='circle'>  
                            <AccessibleIcon/>  
                        </div>
                    </div>
                        <hr />
                        <div 
                            id="1"
                            onClick={changeSpot}
                            className='parkingSpot' 
                            style={{ 
                                backgroundColor: parkingSpots.find(ps => ps.parking_spot_number === 1 && ps.occupancy === true) ? 'lightgrey' : 'lightblue',
                                borderColor: isActive ?  'green' : 'lightblue'
                            }}
                        >
                            <div className='circle'> 
                                1 
                            </div>
                        </div>

                    <hr/>
                    <div 
                        className='parkingSpot' 
                        id="2"
                        onClick={changeSpot}
                        style={{ 
                            backgroundColor: parkingSpots.find(ps => ps.parking_spot_number === 2 && ps.occupancy === true) ? 'lightgrey' : 'lightblue',
                            borderColor: isActive ?  'green' : 'lightblue'
                        }} >
                        <div className='circle'> 
                            2 
                        </div>
                    </div>
                </div>
                </div>  
            </div>
        <Button variant="contained" onSubmit={handleSubmit}> Next  </Button> // ideally this should navigate to the booking form page

     </div>
    );
};

预订表格的代码：

export default function BookingForm(){

    const navigate = useNavigate(); // the navigation hook
    
    const handleClick = event => {
        event.preventDefault();
        navigate('/home'); //redirects to the /home address
    }
    
    
     const handleSubmit = event => {
        event.preventDefault();
        navigate('/home/booking/QRCode'); //redirects to the /home address
    }

    // need to add post request of parking spot, date, full name, car type, license plate, phone number

    return (
        <div className='flex-container'>
            <div className='row'>
                    <div className="flex-container-accessories">
                        <div class="flex-accessories">
                            <div 
                                className='backButton' 
                                id="icon"                     
                                onClick={handleClick}
                                >                 
                            <ArrowBackIosIcon 
                                className="icon" 
                                sx={{fontSize: 'medium'}}
                            /> 
                        </div>
                    </div>
                </div>
            </div>
        
            {/* <BackIcon onClick={handleClick}> </BackIcon> */}

        <div className='row'>
            <header>      
                <div>
                    {/* based off parking spot id: book for {spot}, date {date}, time {time} */}
                    <h2> Spot # <br/> Date  <br/> Time </h2>
                </div>
            </header>
        </div>

        <div className='row'>
            <Box
                component="form"
                sx={{
                    '& > :not(style)': { m: 1},
                }}
                noValidate
                autoComplete="off"
                >
                <TextField id="outlined-basic" label="Full Name" variant="outlined" size="small" />
                <TextField id="outlined-basic" label="Email" variant="outlined" size="small"/>
                <TextField id="outlined-basic" label="Car Type" variant="outlined" size="small"/>
                <TextField id="outlined-basic" label="License Plate" variant="outlined" size="small" />      
                <TextField id="outlined-basic" label="Phone Number" variant="outlined" size="small"/>
                <Button variant="contained" onClick={handleSubmit}> Submit </Button>
            </Box>
        <div className="row">
            <ParkingLegend/>
        </div>   
        </div>
    </div> 
    );
};

"/home "上的每个停车位都是一个div，并使用一个类进行定制。在内部，停车位有一个" id "参数，用于对" selected "停车位进行分类。为了确定是否选择了某个停车位，我使用了一个带有e. target. value的changeSpot，它返回" selected "停车位的id。选择日期的过程遵循类似的模式。