如何将props传递给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() 在目标页面中进行访问。下面的示例向您展示了如何传递 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 ...  )

}

Answer 2

您正在将 props 传递给您的

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

Answer 3

万一有人在 2024 年来到这里。

<Nav.Link 
  as={Link} 
  to="/account-type" 
  state={{ stateLink: "myState" }}
  className="ps-0 py-2"
 >
   Home
</Nav.Link>

然后在您导航到的页面中。您可以通过以下方式访问：

import { useLocation } from "react-router-dom";
let location = useLocation();
const { stateLink } = location?.state;

console.log(stateLink) //myState