在 Reactjs 18.6 中，您可以将 props 作为链接传递，然后可以通过 useLocation() 访问您的目标页面。下面的示例向您展示了如何传递props

import React from 'react';
import { Link } from 'react-router-dom';
import { Nav } from 'react-bootstrap';

const ContactItem = ({ item }) => {
return (
<Nav>
   <Nav.Item>
      <Nav.Link as={Link}
      to={{
        pathname: '/َcontactform',
        state: { currentContact: item},
      }}
     >
     <i className="far fa-edit"></i>
     </Nav.Link>
   </Nav.Item>
</Nav>

)}
    
import React from 'react';
import { useLocation } from 'react-router-dom';

const ContactForm = () => {
  let location = useLocation();
  const { currentContact} = location.state;

  console.log(currentContact)
  return (  ... Components ...  )

}

您正在将props传递给您的Navigation组件，这很好；你可以Nav.Link像这样使用props：

<Nav.Link href={links[0].url}>{links[0].label}</Nav.Link>

示例js：

import React, { useState } from "react";
import { Navbar, Nav } from "react-bootstrap";

const Navigation = ({ name, links }) => {
  return (
    <>
      <div>
        <Navbar bg="primary" variant="dark">
          <Navbar.Brand href="/">Dating Service</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto">
              {links.map((val, indx) => {
                return (
                  <Nav.Link key={indx} href={val.url}>
                    {val.label}
                  </Nav.Link>
                );
              })}
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
      <h1>Hello {name}!</h1>
    </>
  );
};
export default Navigation;

在这里工作堆栈闪电战