Getting Started with React Router v6/

...

/

Passing Props to a Link

Passing Props to a Link

Learn about the various kinds ofprops used with link components, and implement them in a React application.

We'll cover the following...

The <Link /> component has several props other than the to prop, including replace, state, and reloadDocument. You’ll learn more about each of them in this lesson.

The to prop

The to prop makes changes in the URL. It can accept a string or an object as a value. Let’s learn more by reviewing some examples.

to: string

A string representation of a location or URL can be passed as the to prop as follows:

<Link to="/home">Home</Link>

We use string representation in cases where we don’t need to pass search queries, such as navigation links or links that redirect to other pages.

to: object

An object can be passed as the to prop. This object can have one or more of the following properties:

  • pathname: A string representing the path or URL.
  • search: A query string (URL parameters).
  • hash: A hash value in the URL.
  • state: A signal to pass data to the location.
Press + to interact
<Link
  to={{
    pathname: "/contacts",
    search: "?sort=name",
    hash: "#contact",
    state: { name: "userName" }
  }}
/>

The above link navigates the user to the /contacts route. The URL will also change to the following:

http://www.example.com/contacts?sort=name#contact

We can get the ...