Reactjs 如何将 id 从页面传递到另一个页面

我有两页:(Datatable.jsx和Single.jsx).

我需要将id从Datatable.jsx发送到Single.jsx.在谷歌搜索之后，我found知道我可以使用<Link />组件来做到这一点，如下所示:

<Link
  to={{
    pathname: "/page",
    state: data
  }}
>

然后您可以访问所需的发送data到第二页:

render() {
  const { state } = this.props.location
  return (
    // render logic here
  )
}

我不知道如何在我的两个页面上应用这个:

Datable.jsx:

//...

const Datatable = () => {
  const [data, setData] = useState([]);

  const handleDelete = (id) => {
    setData(data.filter((item) => item.id !== id));
    fetch(`https://api.factarni.tn/article/${id}`, {
      method: "DELETE",
      headers: {
        Authorization:
          "Bearer eyJhbGciOiJS...qw2QWltkyA",
      },
    }).then((response) => response.json());
  };

  useEffect(() => {
    fetch("https://api.factarni.tn/article", {
      method: "GET",
      headers: {
        Authorization:
          "Bearer eyJhbGciOiJSUz...WltkyA",
      },
    })
      .then((response) => response.json())
      .then((json) => setData(json));
  }, []);

  const actionColumn = [
    {
      field: "action",
      headerName: "Action",
      width: 200,
      renderCell: (params) => {
        return (
          <div className="cellAction">
            <Link to="/users/test" style={{ textDecoration: "none" }}>
              <div className="viewButton">Modifier</div>
            </Link>
            <div
              className="deleteButton"
              onClick={() => handleDelete(params.row.id)}
            >
              Delete
            </div>
          </div>
        );
      },
    },
  ];
  return (
    <div className="datatable">
      <div className="datatableTitle">
        Add New Article
        <Link to="/users/new" className="link">
          <AddBusinessIcon className="icon" /> Add Article
        </Link>
      </div>
      <DataGrid
        className="dataGrid"
        rows={data}
        columns={userColumns.concat(actionColumn)}
        pageSize={9}
        rowsPerPageOptions={[9]}
        checkboxSelection
      />
    </div>
  );
};

export default Datatable;

Single.jsx:

//...

const Single = ({ inputs, title }) => {
  const [data, setData] = useState({
    code: "",
    article: "",
    price: 0,
    vat: 0,
    status: 0,
    company_id: 0,
  });

  const normalize = (v) => ({
    code: v.code,
    article: v.article,
    price: Number(v.price),
    vat: Number(v.vat),
    status: Number(v.status),
    company_id: Number(v.company_id),
  });

  function handle(e) {
    const newdata = { ...data };
    newdata[e.target.id] = e.target.value;
    setData(newdata);
    console.log(newdata);
  }

  const handleClick = async (e) => {
    e.preventDefault();
    const body = normalize(data);

    await fetch("https://api.factarni.tn/article/create", {
      method: "PUT",
      body: JSON.stringify(body),
      headers: {
        "Content-Type": "application/json",
        Authorization:
          "Bearer eyJhbGciOiJ...w2QWltkyA",
      },
    });
  };

  return (
    <div className="New">
      <Sidebar />
      <div className="newContainer">
        <Navbar />
        <div className="top">
          <h1>{title}</h1>
        </div>
        <div className="bottom">
          <div className="right">
            <form>
              <div className="formInput"></div>
              {inputs.map((input) => (
                <div className="formInput" key={input.id}>
                  <label>{input.label} </label>
                  <input
                    type={input.type}
                    placeholder={input.placeholder}
                    onChange={(e) => handle(e)}
                    id={input.label}
                    name={input.label}
                    value={input.label}
                  />
                </div>
              ))}
              <button onClick={handleClick}>Update</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Single;