# Lesson5-4: React Router: The Link Component
###### tags: `Recat`
{%youtube EZVVkrODWw8%}
{%youtube jrW6zIa0Qdc%}
[Here's the commit with the changes made in this video.](https://github.com/udacity/reactnd-contacts-app/commit/1197d9d7bb255f2ff17eed63d295a80014c26814)

As you've seen, `Link` is a straightforward way to provide declarative, accessible navigation around your application. By passing a `to` property to the `Link` component, you tell your app which path to route to.

<Link to="/about">About</Link>

If you're experienced with routing on the web, you'll know that sometimes our links need to be a little more complex than just a string. For example, you can pass along query parameters or link to specific parts of a page. What if you wanted to pass state to the new route? To account for these scenarios, instead of passing a string to Links to prop, you can pass it an object like this,

<Link to={{
 pathname: '/courses', //A String representing the path to link to
 search: '?sort=name', //A String representation of query parameters
 hash: '#the-hash', //A hash to put in the URL. e.g. #a-hash
 state: { fromDashboard: true } //State to persist to the location
}}>
 Courses
</Link>

You won't need to use this feature all of the time, but it's good to know it exists. You can read more information about `Link` in the [official docs](https://reacttraining.com/react-router/web/api/Link).


# Link Recap
React Router provides a `Link` component which allows you to add declarative, accessible navigation around your application. You'll use it in place of anchor tags (`a`) as you're typically used to. React Router's `<Link>` component is a great way to make navigation through your app accessible for users. Passing a `to` prop to your `link`, for example, helps guide your users to an absolute path (e.g., `/about`):

<Link to="/about">About</Link>

Since the ``<Link>`` component fully renders a proper anchor tag (``<a>``) with the appropriate `href`, you can expect it to behave how a normal link on the web behaves.

# Further Research
- ``<Link>`` at React Training
- [Source Code](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js)