react-router: Setup Tutorial
Tags: react, tutorial, webdev, beginners
Published: 2021-05-17 20:34:19

## Introduction
Developers cannot build more than one-page web application in React because React is a single-page application (SPA). Therefore, a web application that is built in React will not reload the page. How we can make more than one page then? [react-router](https://reactrouter.com/) is the answer to this question. react-router gives us the flexibility to render components dynamically based on the route in the URL. These are the steps how you can set up your react-router in react application.

## Installation
As usual, we need to install the package by running this command in the terminal.
```
npm install react-router-dom

// or

yarn add react-router-dom
```

## Primary Components
According to react-router [documentation](https://reactrouter.com/web/guides/primary-components), there are three main categories of components in react-router (routers, route matchers, and navigation).
- routers -> `<BrowserRouter>` and `<HashRouter>`
- route matchers -> `<Route>` and `<Switch>`
- navigation -> `<Link>`, `<NavLink>`, and `<redirect>`

### Routers
The difference between `<BrowserRouter>` and `<HashRouter>` is the URL link. `<HashRouter>` could store a hash in the link `http://example.com/#/your/page`, and usually, we use it to refer to several sections in the page. 

We must put a router in the top hierarchy component. I usually place the `<BrowserRouter>` in the `index.js` and wrap the `<App/>` component.

```jsx
// ./src/index.js
// ...
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);
```

### Route Matchers
The idea of route matchers is to declare the conditional rendering components corresponding with the URL. I might say `<Route>` is similar to "if statement", and `<Switch>` is similar to [switch statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch). Take a look at the snippets below.

#### Using Route
```jsx
// ./src/App.js
// ...
import { Route } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Nav /> {/* I will show this components in the next section */}
      <Route path="/about">
        <About />
      </Route>
      <Route path="/portfolio">
        <Portfolio />
      </Route>
      <Route path="/contact">
        <Contact />
      </Route>
      <Route path="/">
          <Home />
      </Route>
    </div>
  );
}
```

If we are not using `<Switch>`, it will render `<About />` and `<Home />` components at the same time when users go to the `localhost:3000/about` link. It renders two components at the same time because `/about` matches with `"/about"` and `"/"` paths. 

We can solve more than one component at the same time by adding the `exact` attribute.

```jsx
<Route exact path="/about">
  <About />
</Route>
<Route exact path="/portfolio">
  <Portfolio />
</Route>
<Route exact path="/contact">
  <Contact />
</Route>
<Route exact path="/">
  <Home />
</Route>
```

or we can use the `<Switch>` component like this snippet below.

#### Using Switch
```jsx
// ./src/App.js
// ...
import { Switch, Route } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Nav /> {/* I will show this components in the next section */}
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/portfolio">
          <Portfolio />
        </Route>
        <Route path="/contact">
          <Contact />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </div>
  );
}
```

> a quick note about why I put `path="/"` in the last of Route. If I put `path="/"` in the beginning, other Route will not render at all. When users go to `localhost:3000/about`, it will match with '/' first, and others will be ignored.

### Navigation
Navigation components allow the website to create a new link in the URL without reloading the page like using an anchor tag (`<a>`). Whenever we are using the anchor tag, the page will be reloaded, and we cannot do that in SPA.

```jsx
// ./src/components/Navbar/Navbar.js
// ...
import { Link } from 'react-router-dom';

const Nav = () => {
  return (
    <nav className={styles.wrapper}>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/portfolio">Portfolio</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
};

export default Nav;
```
#### NavLink
The main difference between `<Navlink>` and `<Link>` is styling purposes. If we want to give a style when the link is active we can use `<NavLink`> like the snippet below

```jsx
<NavLink to="/contact" activeClassName="active">
  Contact
</NavLink>
```

It will be rendered to be HTML like this if the users visit `/contact`.
```html
<a href="/contact" className="active">React</a>
```

#### Redirect
If this component renders, it will force to redirect to corresponding with the `to` prop.
```jsx
<Redirect to="/login" />
```

## Conclusion
These three primary categories of `react-router` components are the basis of how we can apply `react-router` to our project. If we understand these three kinds of categories, it will be easier to implement `react-router`. I will share another advanced topic about `react-router` in the next blog.

{% github raaynaldo/react-router-tutorial no-readme %}
![webpage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oohtoqzx35e1eqabrbjq.gif)