---
# System prepended metadata

title: React Router

---

# React Router

---

## What is React Router

Route Matching(Mapper): React Router is about mapping a path to a finction or a component *NOTE: we've seen this type of behavior before*

---

## How does it work

React router intercepts the request and looks for the route / path and returns the matched component. React router handles this at the DOM level.

NOTE: The way we used to make request a server needed to present to be able to handle the request.

---

## Installation

`npm install react-router-dom`

---

## Terminology

```
- BrowserRouter
- Routes
- Route
- Link
```

---

## BrowserRouter

```BroswerRouter```: We wrap our entire application with the `BrowserRouter` interface so that we can have access to routing across the project. `BroswerRouter` stores our current location. It utilizes the browsers built in history stack so that we are able to perform navigation. 

```
// import
import { BrowserRouter } from 'react-router-dom'

// usage
<BrowserRouter>
    {/* Application Logic ... */}
</BrowserRouter>
```

---

## Routes && Route

```Routes && Route``` : We utilize the `Routes` interface when grouping our routes together. `Route` on the other hand is primary in rendering our components when the path is match in the browser.

```
// import
import { BrowserRouter, Routes } from 'react-router-dom'

// usage
<BrowserRouter>
    <Routes>
        <Route path='/' element={<ComponentToRender/>}/>
    </Routes>
</BrowserRouter>
```

---

## Link && NavLink

```Link && NavLink```: These two interface is primary in pushing the new route. Useful in actions taken in the browser such navbars and button clicks. When the user taps on an element with`Link or NavLink` associated with it. The user will be navigated to the route.

```
//import
import {Link, NavLink} from 'react-rotuer-dom'
<Link to='/pathName'> Path </Link>
//Usage
<Link to='/pathName'> Path </Link>
<NavLink to='/pathName'> Path </NavLink> // accessibility
```

---