how to pass props to Nav.Link of react-bootstrap

Question

I am using the following Navbar. I would like to pass some props to Nav.Link. I don't know how to pass the property to Nav.Link. Or is it just like 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

You're passing props to your Navigation component, which is alright; you can use the props in Nav.Link like:

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

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

working stackblitz here