ENDS 12/4: Get 50% off your Pro annual membership using code [CYBER23](https://www.codecademy.com/checkout?periods=year&plan_id=proGoldAnnualV2&discountCode=CYBER23)


In this lesson, you will learn what routing is as well as how to add routing to your [Single-Page](https://external-production.codecademy.com/articles/fecp-what-is-a-spa) React applications with [React Router](https://reactrouter.com/) version 6. To reinforce your learning, you will implement routing for a tech article blog built with [Create React App](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app).

Learn React Router v6

Query parameters appear in URLs beginning with a question mark (`?`) and are followed by a parameter name assigned to a value. They are optional and are most often used to search, sort and/or filter resources.

For example, if you were to visit the URL below...

```
https://www.google.com/search?q=codecademy
```

... you would be taken to Google's `/search` page displaying results for the search term `codecademy`. In this example, the name of the query parameter is `q`.

Query parameters can be useful in determining which content to display to our user and React Router provides a mechanism for grabbing query parameter values with the `useSearchParams()` hook. This hook returns a  [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) object and a function we can use to update it.

Consider this example of a `SortedList` component:

```js
import { useSearchParams } from 'react-router-dom';

// Rendered when a user visits "/list?order=DESC"
export const SortedList = (numberList) => {
  const [ searchParams, setSearchParams ] = useSearchParams();
  const sortOrder = searchParams.get('order');
  console.log(sortOrder); // Prints "DESC"
};
```
Let's break down this example:
* First, we import `useSearchParams()` and call it within `SortedList` to get the `URLSearchParams` object. This object has a `.get()` method for retrieving query parameter values. 
* Finally, to get the value of a specific query parameter, we pass in the name of the query parameter whose value we want to obtain, as a string (`'order'`), to the `queryParams.get()` method. The value (`'DESC'`) is then stored in the variable `order`.

Let's expand the `SortedList` example so that the component uses the `order` value to render a list of data either in ascending order, in descending order, or in its natural order.

```js
import { useSearchParams } from 'react-router-dom'

// Rendered when a user visits "/list?order=DESC"
export const SortedList = (numberList) => {
  const [ searchParams, setSearchParams ] = useSearchParams();
  const sortOrder = searchParams.get('order');

  if (sortOrder === 'ASC') {
    // render the numberList in ascending order
  } else if (sortOrder === 'DESC') {
    // render the numberList in descending order
  } else {
    // render the numberList as is
  }
}
```
Now, if the user were to visit `/list?order=DESC`, the value `'DESC'` would be extracted and we can render the `SortedList` component in descending order. Likewise, visiting `/list?order=ASC` will render the list in ascending order. Finally, since query parameters are optional, if we were to visit `/list`, the `SortedList` component would render in its natural order.

Imagine we have a `List` component with a `sort` button that we wanted to use to update the URL to `/list?order=ASC`, then render `SortedList`. We can use the `setSearchParams()` function to do this. For example:

```js
import { useSearchParams } from 'react-router-dom';

// Rendered when a user visits "/list"
export const List = (numberList) => {
  const [ searchParams, setSearchParams ] = useSearchParams();

  // render the numberList in ascending order
  <button click={ () => setSearchParams( {order: 'ASC'} ) }>
    Sort 
  </button>
}
```
When a user clicks on the `Sort` button we'll update the path to `/list?order=ASC`, which will cause our `SortedList` component to render. 

`useSearchParams` works great when we want to access the current path's query parameters or alter them but what if we want to navigate to a path and include query parameters too? Well, for this scenario we'll need to use the `createSearchParams()` utility function from `react-router-dom` with the `useNavigate` hook we learned about previously. 

For example, if we wanted to directly navigate to `/list?order=ASC` from the root (`/`) path we'd do something like this:
```js
import { useNavigate, createSearchParams } from 'react-router-dom';
// get navigate function
const navigate = useNavigate();

// define an object where the key is is the query parameter name and value is query parameter value
const searchQueryParams = {
  order: 'ASC'
}

// use createSearchParams which takes an object and transforms it to a query string of the form order=ASC
const searchQueryString = createSearchParams(searchQueryParams);

// force a navigate by passing in an object with pathname indicating that path to navigate and search indicating the query parameters to append
navigate({
  pathname:'/list',
  search: `?${searchQueryString}`
})
```
The important things to note about the example above are that we:
- Define an object representing the query parameters we want and call it `searchQueryParams`.
- Pass `searchQueryParams` to `createSearchParams` which will transform it from an object to a query string form.
- Call `useNavigate` and pass an object with `pathname` and `search` keys where `pathname` is a string indicating where to navigate to and `search` is a string indicating the query string to append to the path.

Note that we need to include the `?` which is why we use a template string here. 

Great job learning about query parameters let's now practice adding some filtering to our articles by using them.  

Query Parameters

In order to use React Router, you will need to include the [`react-router-dom` package](https://www.npmjs.com/package/react-router-dom) (the version of React Router built specifically for web browsers) in your project by using `npm` like so:

```sh
npm install --save react-router-dom@6
```

Once you have added `react-router-dom` to your project, you can import one of its routers to add routing to your project. React Router provides multiple routers, however, the most common one is `createBrowserRouter`. The other options, and the reasons you might choose one over the other, are outside the scope of this lesson. If you are interested, you can read more about alternative routing options [here](https://reactrouter.com/en/main/routers/picking-a-router).

To add a router to our project, we can import it at the top of our file, like so:

```js
import { createBrowserRouter } from 'react-router-dom';
```

Next, we'll initialize our router by calling `createBrowserRouter`. This method accepts a list of JSX components (we'll discuss this more in the upcoming exercises):
```js
import { createBrowserRouter } from 'react-router-dom';
const router = createBrowserRouter( /* application routes are defined here */ );
```

The `router` serves as the basis for all the React Router logic. Without it, we'd get errors if we tried using React Router components or methods. Let's practice defining a router for our application.  

Installing React Router

With our `router` in place, we can begin defining the different views, or _routes_, that our application will render for various URL paths. For example, we might want to render an `About` component for the `/about` path and a `SignUp` component for the `/sign-up` path. React Router gives us two options to define routes: JSX or objects. In this lesson, we'll be learning to implement routes using JSX notation. If you're interested, you can learn more about object notation [here](https://reactrouter.com/en/main/route/route).

The `.createBrowserRouter` method accepts an array of `<Route>` objects, so we'll need to use React Router's `.createRoutesFromElements` method to configure our routes with JSX. We also need to use React Router's `<Route>` component to define our routes. These components can be imported from the `react-router-dom` package, alongside the `.createBrowserRouter` method, like so:

```js
import { RouterProvider, createBrowserRouter, createRoutesFromElements, Route } from `react-router-dom`
```

The `<Route>` component is designed to render (or not render) a component based on the current URL path. Each `<Route>` component should include:
1. A `path` prop indicating the _exact_ URL path that will cause the route to render.
2. An `element` prop describing the component to be rendered.

For example, we can use `.createRoutesFromElements` to configure a `<Route>` that renders the `<About>` component when the URL path matches `'/about'`:

```js
import About from './About.js';
import { RouterProvider, createBrowserRouter, Route } from 'react-router-dom';
const router = createBrowserRouter(createRoutesFromElements(
  <Route path='/about' element={ <About/> } />
));

export default function App () {
  return (
    <RouterProvider router={ router } />
  );
}
```

In many cases, there may be certain components, like sidebars, navigation bars, and footers, that we want to render with every page view. We can achieve this by defining a root-level component that contains layout elements we want to render consistently. We can then nest the rest of our routes within this root-level component, like so:

```js
/* imports ... */

const router = createBrowserRouter(createRoutesFromElements(
  <Route path='/' element={ <Root/> }>
    // nested routes here will render along with the <Root/> component
  </Route>
));
```

With this route configuration, whenever a user navigates to one of the nested routes, that view will render, along with any elements we've defined in our `<Root/>` component. We'll discuss root-level components and nested components in greater detail in the upcoming exercises. Before we move on, let's practice adding routes to our application so that our application will render the correct component when we visit certain paths. 

Basic Routing with <Route>

_Routing_ is the process by which a web application uses the current browser URL (**U**niform **R**esource **L**ocator) to determine what content to show a user. For example, a user visiting Wikipedia's [`/wiki/Node.js`](https://en.wikipedia.org/wiki/Node.js) page would expect to see something different from the [`/wiki/React_(JavaScript_library)`](https://en.wikipedia.org/wiki/React_(JavaScript_library)) page. 

By organizing an application's content and displaying only what the user has requested to see, routing allows for rich, engaging, and clear user experiences.

Before we dive into the lesson, let's briefly go over the basic structure of URLs. Consider this URL:

![URL breakdown](https://static-assets.codecademy.com/Courses/Learn-Node/http/url-dark.png)

Every URL is essentially a request for some resource and each component of the URL serves to specify which resource is desired. URLs consist of several components, some of which are mandatory and some of which are optional:
  1. The scheme (eg. `HTTP`, `HTTPS`, `mailto`, etc), which specifies what [protocol](https://www.codecademy.com/articles/http-requests) should be used to access the resource.
  2. The domain (eg. `codecademy.com`), which specifies the website that hosts the resource. The domain serves as the entry point for your application.
  3. The path (eg. `/articles`), which identifies the specific resource or page to be loaded and displayed to the user. This is where routing begins!
  4. The optional query string (eg. `?search=node`), which appears after a '?' and assigns values to parameters. Common uses of query strings include search parameters and filters.

Depending on the kind of application you build, there are different ways to handle the requests coming into your server. A popular back-end solution is to use the [Express](https://www.codecademy.com/learn/learn-express) routing framework. In this lesson, we will cover [React Router](https://reactrouter.com/en/main/), a popular front-end routing solution designed specifically for React applications.

What Is Routing?

In the React Router paradigm, the different views of your application, also called _routes_ are just React components. To include them in your application, you will need to render them. 

The first step is to make our router available to our entire application by using React Router's `RouterProvider`.

```js
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
const router = createBrowserRouter( /* application routes are defined here */ );

export default function App () {
  return (
    <RouterProvider router={ router } />
  );
}
```

`createBrowserRouter` will define a router that prevents URL changes from causing the page to reload. Instead, URL changes will allow the `router` to determine which of its defined routes to render while passing along information about the current URL's path as props. We make our router available application-wide by providing it using `RouterProvider`at the root of our application. 

In the next exercises, we will learn how to define route components so they can make use of this information but for now, let's add a `router` to our application.

Providing A Router

If you take anything away from this lesson, it should be that React Router treats everything as a component. To get fully comfortable using React Router in your code, you have to embrace this idea and the declarative coding style that follows from it. For the most part, this is pretty intuitive, but it can feel a bit counterintuitive when it comes to redirecting users.

To appreciate the declarative pattern, consider a common case for redirecting a user: a user wants to access a `/profile` page that requires authentication but is not currently signed in. 

The `Navigate` component provided by React Router makes this easy! Like a `Link` or `NavLink`, the `Navigate` component has a `to` prop. However, where `Link` and `NavLink` must be clicked to navigate the user, once the `Navigate` component is rendered, the user will automatically be taken to the location specified by the `to` prop:

```js
import { Navigate } from 'react-router-dom';

const UserProfile = ({ loggedIn }) => {
  if (!loggedIn) {
    return (
      <Navigate to='/' />
    )
  }

  return (
    // ... user profile content here
  )  
}
```

In this example, when the `UserProfile` component renders, if the `loggedIn` prop is `false`, then the `Navigate` component will be returned and then rendered, sending the user to the `/` page. Otherwise, the component will render normally.

Let's practice declaratively redirecting non-logged-in users in our application.

<Navigate>

Great work! You've learned everything you need to know to add front-end routing to your React applications using React Router! To recap, you've learned how to:

* Install `react-router-dom` and add it to a React application.
* Enable routing by using `RouterProvider` and providing a `router`.
* Creating a router using `createBrowserRouter()`.
* Use `createRoutesFromElements()` to configure a router.
* Use the `Route` component to add static and dynamic routes to an application.
* Use `Link` and `NavLink` components to add links to an application. 
* Access the values of URL parameters using React Router's `useParams` hook.
* Create nested routes using `Route`, `Outlet`, and relative `path`s.
* Declaratively redirect users by rendering React Router's `Navigate` component
* Imperatively redirect users via the `useNavigate` hook.
* Access and set the value of query parameters using React Router's `useSearchParams` hook.

Great job learning about React Router. You've learned a lot of about React Router's core functionality. If you'd like to explore more you can check out the official docs [here](https://reactrouter.com/en/main/start/overview). 

We encourage you to continue practicing what you've learned and experimenting with the React Router on your own. 

Review

In the previous exercise, you learned how to redirect declaratively by rendering a `Navigate` component that updates the browser's current location. Though this approach follows React Router's declarative coding style, it does introduce a few extra steps in the React rendering lifecycle: 
1. The `Navigate` component must be returned.
2. The `Navigate` component is then rendered.
3. The URL is updated.
4. And finally the appropriate route is rendered. 

React Router also provides a mechanism for updating the browser's location imperatively using the `useNavigate` hook. 

```js
import { useNavigate } from 'react-router-dom';
```

The `useNavigate()` function returns a `navigate` function that allows us to specify a path where we'd like to navigate.

Consider this example which immediately triggers a redirect back to the `/` page after a user successfully submits a `<form>`:

```js
import { useNavigate } from `react-router-dom`;

export const ExampleForm = () => {

  const navigate = useNavigate()

  const handleSubmit = e => {
    e.preventDefault();
    navigate('/')
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* form elements */ }
    </form>
  )
}
```

By enabling imperative updates to the browser location, the `navigate` function allows you to respond immediately to user input without having to wait.

The `useNavigate()` function also gives us the ability to programmatically navigate our users through their [history](https://developer.mozilla.org/en-US/docs/Web/API/Window/history) stack. Scenarios like enabling users to go forward or backward in an application, or redirecting users to their previous page after they've logged in, are great use cases for this functionality. To navigate a user through their history stack using `useNavigate()`, we'd pass in an integer to indicate where in the history we'd like to travel. A positive integer navigates forward and a negative integer navigates backward.

For example:
* `navigate(-1)` - navigate to the previous URL in the history stack.
* `navigate(1)` - navigate to the next URL in the history stack.
* `navigate(-3)` - navigate 3 URLs back in the history stack.  

Below, we can see how the `navigate()` function is used to enable a "Go Back" button:

```js
import { useNavigate } from `react-router-dom`

export const BackButton = () => {
  const navigate = useNavigate()

  return (
    <button onClick={() => navigate(-1)}>
      Go Back
    </button>
  )
}
```

Let's practice using `useNavigate` to give our users the ability to navigate backward and forward no matter where they are in our application. 

useNavigate

In the last exercise, you used the URL bar to navigate to a path that matched one of your application's routes. But how do you navigate from within the app itself?

When building a website using HTML, we use the anchor (`<a>`) tag to create links to other pages. A side effect of the anchor tag is that it causes the page to reload. This can distract our users from the immersive experience of our smooth React application!

React Router offers two solutions for this: the [`Link`](https://reactrouter.com/en/main/components/link) and [`NavLink`](https://reactrouter.com/en/main/components/nav-link) components, both of which can be imported from the `react-router-dom` package. 

```js
import { createBrowserRouter, createRoutesFromElement, Route, Link, NavLink } from 'react-router-dom';
```

Both `Link` and `NavLink` components work much like anchor tags:
* They have a `to` prop that indicates the location to redirect the user to, similar to the anchor tag's `href` attribute.
* They wrap some HTML to use as the display for the link.

```js
<Link to="/about">About</Link>
<NavLink to="/about">About</NavLink>
```

Both of the above links will generate anchor (`<a>`) tags with the text "About", which take the user to the `/about` view when clicked. However, the default behavior of an anchor tag – refreshing when the page loads – will be disabled. Note that if we preface the path provided to our `to` prop with a forward slash, `/`, as we did in the example above, this path will be treated as an **absolute** path. That is, React Router will assume this path is navigating from the root directory. We'll talk more about how to define paths that are **relative** to our current directory in upcoming exercises.

So, what's the difference between a `Link` and a `NavLink`? When the URL path matches a `NavLink` component's `to` prop, the link will automatically have an `'active'` class applied to it. This can be quite useful for building navigation menus, as we can define CSS styles for the `.active` class name to differentiate between active and inactive links, enabling users to quickly see which content they are viewing. We can also pass a function to `className` or `style` to further customize the styling of an active (or inactive) `NavLink`, like so:

```js
<NavLink 
  to="about" 
  className={ ({ isActive }) => isActive? 'activeNavLink' : 'inactiveNavLink'}
  > About </NavLink>
```

In the example above we pass a function to the `className` prop which applies the `activeNavLink` class if the `NavLink` is active and `inactiveNavLink` otherwise. 

As we've seen in this exercise, `NavLink` and `Link` are great tools to use to help our users navigate our website. Let's practice using `Link` and `NavLink` in our application so that our users can have an easier time navigating around. 


Linking to Routes

It is common to use the value of URL parameters to determine what is displayed in the component that a dynamic route renders. For example, the `Article` component might need to display the title of the current article.

React Router provides a hook, `useParams()`, for accessing the value of URL parameters. When called, `useParams()` returns an object that maps the names of URL Parameters to their values in the current URL. 

For example, consider the `Articles` component below which is rendered by a route with the dynamic URL `'/articles/:title'`. Consider the following `Article` component, that will render when a user visits `/articles/objects`:

```js
import { Link, useParams } from 'react-router-dom';

export default function Article() {
  
  let { title } = useParams();
  // title will be equal to the string 'objects'

  // The title will be rendered in the <h1>
  return (
    <article>
      <h1>{title}</h1>
    </article>
  );
}
```

Let's break down the example above.
* First, the `useParams()` hook is imported from `react-router-dom`. 
* Then, inside the `Article` component, `useParams()` is called which returns an object. 
* [Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) is then used to extract the value of the URL parameter from that object, storing it in a variable named `title`. 
* Finally, this `title` value is used to display the name of the article in the `<h1>` element.

Let's practice using URL parameters in our components.

useParams

So far, all the routes we've covered have been static, which means they match a single unique path. This works for predetermined routes that render a consistent view. But what if we need to build a route that is more flexible?

For example, imagine a tech news site where each article is accessible from the path `'/articles/' + some-title` where `some-title` is unique for each article. Specifying a distinct route for every article would not only be verbose and time-consuming, but it would also require an impractical amount of maintenance should the path structure ever change or we need to add new articles. 

It would be much more convenient to define a single route that can match any path with the pattern `'/articles/' + someTitle` and know exactly which component to render. React Router allows us to do this by using **URL parameters** to create **dynamic routes**. 

URL parameters are dynamic segments of a URL that act as placeholders for more specific resources. They appear in a dynamic route as a colon (`:`) followed by a variable name, like so:

```js
const route = createBrowserRouter(createRoutesFromElement(
  <Route path='/articles/:title' element={ <Article /> }/>
))
```

Let's break down this short, yet powerful demonstration of URL parameters:
* In this example, the path prop `'articles/:title'` contains the URL parameter `:title`. 
* This means that when the user navigates to pages such as `'/articles/what-is-react'` or `'/articles/html-and-css'`, the `<Article />` component will render.
* When the `Article` component is rendered in this way, it can access the actual value of that `:title` URL parameter (`what-is-react` or `html-and-css`) to determine which article to display (more on this in the next exercise). A single route can even have multiple parameters (eg. `'articles/:title/comments/:commentId'`) or none (eg. `'articles'`). 

Let's take advantage of dynamic routes by using URL parameters in our application. 

Dynamic Routes

Up to this point, we've been working with routers that are relatively small. As our application grows and we add more features, we may want additional components to render within our defined views depending on user actions. 

For example, suppose that we have an `About` page that will be rendered if we hit the path `/about`. We'd like to implement a new feature that will display a secret message in `About` if the path changes to `/about/secret`. We might try and do this:

```js
/* imports ... */
const router = createBrowserRouter(createRoutesFromElement([
  <Route path='/about' element={ <About/> }>  />,
  <Route path='/about/secret' element={ <Secret/> }>  />
]));
```

Since React Router matches paths _exactly_, if we go to the path `/about/secret`, it will only render `Secret` and not `About`. We'd like to render `About` when we hit `/about` and _also_ render `Secret` below `About` when we hit `/about/secret`. We can do this using **nested routes**. 

A nested route, as the name suggests, is a `Route` within a `Route`. A `Route` containing one or more `Route`s nested within it is known as the **parent** route and a `Route` that is contained within another `Route` is known as the **child** route. When nesting `Route`s, the child `Route` `path` is _relative_ to the parent `Route`'s `path` so we shouldn't include the parent `path` in its `path` prop. 

For example, we can create a nested route by refactoring the code above, like so:

```js
/* imports ... */
const router = createBrowserRouter(createRoutesFromElement(
  <Route path='/about' element={ <About/> }> {/* About renders if path starts with /about */}
    <Route path='secret' element={ <Secret/> }>  />  {/* we can exclude /about from this path since it is relative to its parent */}
  </Route> 
));
```
Using this nested route, the `About` component will render when the path starts with `/about`. If the path matches `/about/secret`, the `Secret` component will render in addition to the `About` component. Remember that a `Route` can be both a parent and child route if it is nested within a route and contains nested routes within it. The same parent/child properties would apply.

Our router is configured to render our nested route, but if we ran this code we still wouldn't see `Secret` rendered below `About`. That's because we haven't told `About` _where_ to render its child route element. To do this we need to make use of the React Router `Outlet` component in the parent `About` component, like so:

```js
import { Outlet } from 'react-router-dom';

// Rendered when the user visits '/about'
export default function About() {
  return (
    <main>
       <h1>Lorem ipsum dolor sit amet.</h1>
       <Outlet/>  {/* renders child element when user visits /about/secret */}
    <main/>   
  );
}
```
Now when we visit `/about/secret` our router will render `About` and its child route component, `Secret`, wherever the `Outlet` component is defined in the parent. You can think of it as the router replacing `Outlet` with our defined child route. 

When using nested routes we can also make use of **index** routes. An index route is a `Route` that uses the `index` prop instead of a `path` prop and is special because it renders on its parent's `path`. For example:
```js
/* imports ... */
const router = createBrowserRouter(createRoutesFromElement(
  <Route path='/about' element={ <About/> }> {/* About renders if path starts with /about */}
    <Route index element={ <IndexComponent/> }>  />  {/* Will render when the path is /about */}
    <Route path='secret' element={ <Secret/> }>  />  {/* Will render when the path is /about/secret */}
  </Route> 
));
```

We can think of an index route as a __default__ `Route` that will render in its parent's `Outlet` when the path matches the parent `path` exactly so there's some content in that space. 

Nested routes give us fine-tuned control over what, when, and where certain elements appear within their parent `Route`. Let's practice what we've learned by adding some nested routes to our application.
