如何将道具传递给 react-bootstrap 的 Nav.Link

Question

我正在使用以下导航栏。我想将一些道具传递给 Nav.Link。我不知道如何将属性传递给 Nav.Link。还是就像 HTML href="a.html?param=test" 一样？

    const Navigation = (props) => {
    console.log(props);
    return (
        <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">
                    <Nav.Link href="/">Home</Nav.Link>
                    <Nav.Link href="/CreateProfile">Create Profile</Nav.Link>
                    <Nav.Link href="/ViewProfile">View Profile</Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    )
}

Answer 1

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

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 ...  )

}

Answer 2

您正在将道具传递给您的 Navigation 组件，这没关系；您可以使用Nav.Link 中的道具，例如：

<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;

工作stackblitz here