Reactjs 使用链接传递变量

我在传递带有链接的变量时遇到一些问题 我需要你的帮助。 我需要单击取消选择链接并重定向到联系人，然后在下面的输入中自动选择取消打包

我试图这样做，并给出一个错误：道具是未定义的

这里是有链接时的包文件

import { Link } from "react-router-dom";
import "./Packages.css"

const Package = () => {

    return (
        <div className="packages-container">
        
            <div className="packages">

                <div className="package one">
                    <img
                        className="silver"
                        src="photos/silver.png"
                        alt="silver package"
                    />
                    <Link
                        className="package-btn"

                        to={'/contact/' + 1}>
                        SELECT
                            </Link>
                </div>

                <div className="package two">
                    <img
                        className="gold"
                        src="photos/gold.png"
                        alt="silver package"
                    />
                    <Link
                        className="package-btn"
                        packageId="2"
                        to={'/contact/' + 2}>
                        SELECT
                            </Link>
                </div>

            </div>
    )
}
export default Package

这是页面联系人，我需要用正确的包自动选择输入

import React, { useState, useEffect, Fragment } from 'react';
import "./Contact.css"
import Layout from "../Layout/Layout"
import FadeIn from 'react-fade-in';
import emailjs from 'emailjs-com';


const Contacts = () => {

    console.log(this.props.match.params.id);

    const Contact = () => {
        useEffect(() => {
            window.scrollTo(0, 0)
        }, [])

        
        const form = showForm => (
            showForm && <form onSubmit={handleSubmit}>
                <label htmlFor="how">Which Package?<span className="optional">*</span></label>
                <select
                    name="pack"
                    className="contact-input package"
                    onChange={handleChange("pack")}
                    value={pack}
                    required>
                    <option value="" style={{ display: "none" }}> -- Select an option -- </option>
                    <option value="Gold Package">Gold Package</option>
                    <option value="Platinum Package">Platinum Package</option>
                    <option value="Silver Package">Silver Package</option>
                </select>

                

                <button type="submit">Send</button>
            </form>
        );
        return (
            <Fragment>
                <h3 className="contact-header">
                    Questions? <br />
            Want to reserve a date? <br />
            Contact Us! <br />
                </h3>
                {form(data.showForm)}
                {showLoading(data.loading)}
                {showSuccess(data.success)}
            </Fragment>
        );
    }

    

    return {
        Contact,
        ContactPage
    }
}
export default Contacts;

问题 功能组件是无瞬间的，并且没有一个定义为将道具绑定到该组件

解决方案 访问可能传递给渲染组件的道具对象

const Contacts = (props) => { // <-- props
  console.log(props.match.params.id);
  ...

---

我是reactjs新手，但我不知道你在哪里传递道具。也许这就是道具未定义的原因