MENU

<Link>

Like the HTML <a> tag, <Link> specifies a hyperlink.

Attributes:

to: String

the destination URL string.

to: partial Path object

the destination URL object with the following properties.

pathname: the path to link to.

search: the query parameters.

hash: the hash. Eg. #productX

state: any

a serializable value to associate with this navigation entry, without putting it in the URL. Read it back later with useLocation().state. Note this used to be a field nested inside the 'to' object in older React Router versions; it is now its own sibling attribute.

replace: bool

when true, clicking the link will replace the current entry in the history stack instead of adding a new one.

Two older attributes are gone: a function form of to (deriving the destination from the current location) is no longer supported, and there is no more component attribute for swapping in your own element. <Link> already forwards its ref to the rendered <a>, so wrap or compose it directly instead of replacing it.

Others

You can also pass props you'd like to be on the compiled <a> such as a title, id, className, etc.

<Link to="/courses?sort=name">…

<Link to="/courses?sort=name">…

<Link
  to={{ pathname: "/courses", search: "?sort=name", hash: "#the-hash" }}
  state={{ fromDashboard: true }}
>…

<Link
  to={{ pathname: "/courses", search: "?sort=name", hash: "#the-hash" }}
  state={{ fromDashboard: true }}
>…

<Link to="/courses" replace>…

<Link to="/courses" replace>…