# 1.2: React Router Dom

## What is React Router Dom?

React router dom is a package that we installed from NPM, which you can see [here](https://www.npmjs.com/package/react-router-dom). This package serves one main purpose, and that is enabling use to provide routing within our application in React. If you think back to gold badge and how we routed things, it was using anchor tags in HTML. However, with react applications, we want to not use those as they reload the page, and will make everything take much longer. Since we're using React to make a single page application, when we want to route to a new "page", it's actually not going to reroute our whole web page, but instead just change the content. So the package which we can achieve this through in React Router Dom!

So, summarizing, React Router Dom, allows us to navigate to different sections of our single page application, without causing the page to redirect or refresh.

## How We Are Using React Router Dom

As with most things in coding, there are several ways to set up React Router Dom, but all of them share the same pieces. In our application we're using a few of these pieces to do our routing. So we'll start with looking in our `App.js` file at what we've done.

First, let's look at our import:

```javascript
import {
  BrowserRouter as Router,
} from 'react-router-dom';
```

Notice we're importing the specific part of the package `BrowserRouter` but we're calling it `Router`. This is a common rename of the import, because developers are lazy and would rather type `Router` later, instead of `BrowserRouter`. Note that this is how you can change the name of specific imports.

Then, let's look at how we use our `Router` in the code:

```javascript
render() {
    return (
      <div>
        <Header />
        <Router>
          <Sidebar />
        </Router>
        <Footer />
      </div>
    );
  }
```

So, in our render, we first have our Header which is not inside of the Router. Basically this means that the `Header` component will not be affected by any route changes at all. Same thing with footer, they will show up regardless of what route we are at! The only thing that changes is the main content of our page, which is controlled by `<Sidebar />`!

In order for React Router Dom to work, everything that is part of the package, has to be wrapped in a Router. That's basically how it knows that we are using React Router Dom. Without this Router, usually declared in `App.js` or even `index.js`, our routing won't work. So don't forget this step when using the package in the future!

## React Router in Sidebar

Above we saw how to set up the initial Router. Now, let's look at what we've already done in Sidebar to understand how to use the other pieces of this package.

Let's look at our imports first:

```javascript
import {
  Route,
  Link,
  Switch
} from 'react-router-dom'
```

Notice that we are importing three things from React Router Dom. These are the last three things we'll be using from the package in this application! This time we kept their names, since they are short!

## Route

Next, let's look at how we set up our routing. We need some way to tell react router dom what needs to be shown at each route. So when I go to `/functionalcomponent` at the end of my url, what will be shown? React router dom has no idea until I tell it what to do! We do that using `<Route />`s.

Let's look at the code we already have in sidebar:

```javascript
<div className="sidebar-route">
    <Switch>
        <Route exact path="/home"><Home /></Route>
        <Route exact path="/resources"><Resources /></Route>
        <Route exact path="/"><Home /></Route>
        <Route exact path="/functionalcomponent"><FunctionalComponentDemo /></Route>
    </Switch>
</div>
```

So let's look at a Route in depth.

```javascript
<Route exact path="/home"><Home /></Route>
```

This is how we can set up an official Route. Let's first start with exact, what does it mean? Exact limits the path that can match this route to only the words shown. So above, `/home` will take us to the `Home` component, but `/home/3` will not. Without exact on the Route, `/home/3`, would also take us to the home component.

Next, is `path="/home"`. This is just saying that the path where this component should be shown is `/home`!

One more important thing, notice how the component is declared between the open and closing Route tags. Ensure that there are no excess spaces in between the Routes as well, as this could cause it to break. Each Route **has** to have only one child component. So if you wanted multiple component in one route, you'd have to wrap them all in a div!

## Switch

So, now that we know how routes work, how can we make sure only one thing shows up at the same time? We can use `Switch`. We use this to wrap our Routes in because, the Switch acts like a vanilla JS switch, and iterates over the routes and only render the first one that matches the current pathname. This is just an extra assurance that we're not going to have unintentional multiple components render at one time!

## Link

So, above, we talked about how we set up the different Routes and components to render, but how can we go to those paths without using anchor tags, and redirecting our site. That's where `Link` comes in!

```javascript
<ul className="sidebar-list list-unstyled">
    <li><Link to="/">Home</Link></li>
    <li><Link to="/rationale">Rationale</Link></li>
    <li><Link to="/functionalcomponent">Functional Component</Link></li>
    <li><Link to="/resources">Resources</Link></li>
</ul>
```

Link has a `to="/functionalcomponent` aspect to it. This is basically telling react router dom where to go. After we click this link, it'll then direct our page, without refreshing and officially redirecting to the new path, at which points our Route should render the appropriate content!

And that's all there is to it. Feel free to reference this chapter a lot moving forward, as you continue to work with React Router Dom throughout this project, and on your future react projects!


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://eleven-fifty-academy.gitbook.io/javascript-301-reactfundamentals/part-1-intro-and-setup/1.2-react-router-dom.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.