Guide To : React Routing !
Tags: react, programming, javascript, webdev
Published: 2021-08-19 15:35:58

## Introduction

Routing in react application is really useful especially when it comes to building an app with multiple pages.It is easy to implement in your project and make your project more organize !

## Getting Started

So first of all, you must install the `react-router-dom` package by running `npm install react-router-dom` in your integrated terminal.

## Implementation

In simple words, react routing usually is used when you want to implement multiple pages in your app or selectively display some UI.

To begin with, import some important component from react-router-dom library on top of your `App.js`.

```
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom'
```
As you see there are 3 important thing to begin with :

1. Router
2. Switch
3. Route

### Router

Wrap all the tag in your `App.js` with `<Router></Router>` to allow function like `useHistory()` to be used in your components.Otherwise, an error will be throw that tell you `useHistory()` cannot be used outside the router.

### Switch

`Switch` tag must wrap all the `Route` tag, to allow your route to functioning. Without `switch` tag, all of your route will be display.

### Route

Route tag is responsible for providing a path for your component to be rendered.

Here is the syntax for route :
```
<Route path='/{put your path here !}'  exact component={put your component here !}></Route>
```

Here is the example of how `Router`, `Switch`, `Route` are placed on your `App.js` :

```
<div className="App">

<Header/>

<Router>

<Switch>

<Route path='/'  exact component={TouristList}></Route> 

<Route path='/detail/:id' exact component={TouristDetail}></Route>

</Switch>

</Router>

</div>

```
#### Note :
You may be wondering why I dont put my `<Header/>` inside the `Router` tag ? That is because in my `Header` component, there is navigation bar for my app and I want my navigation bar will always be displayed no matter on what page the user is.

Okay, now I have setup the routing, how am I going to another page ? Route ?

Well, this is when we will used a function from `react-router-dom` library to switch into another route which is `useHistory()`.

#### Note :
There is also called component called `<Link>` that has similar function to useHistory() ! However, I dont like to use it because it basically like wrapping an `<a>` tag, and if you realize it will cause some problem in your css. (You may give it a try !)

### useHistory()

First we must import `useHistory()` function from `react-router-dom` library on top of your js file.

```
import {useHistory} from 'react-router-dom'
```

Next create an instance of useHistory inside of your component:
```
const App = () => {
  let history = useHistory()
}
```
Then,we can use one of useHistory method which is push in your JSX element like button.

```
const App = () => {
  let history = useHistory()

 return(
        <>
           <button 
            onClick={()=>history.push('/nextpage')>
            Next Page
            </button>
        </>
}
```
`.push()` is one of the array method that we used to insert an element at the end of an array.In terms of routing, our app will rendered the last component in an array.So by pushing a new path to the end of the array, we literally tell our app to render the a new component.

### useParams()

The last function that I want to explain is useParam(). Well, this function allow us to pass information through path.

So we must declare that we want to pass a parameter (information) through path by adding `/:{parameter name}` to the end of your path.

Example :
```
<Route path='/detail/:id' exact component={TouristDetail}></Route>
```
I have added a parameter called `id`. So, for me to pass information using `useHistory` just like this:

```
onClick={()=> history.push(`/detail/${id}`)}
```

Notice that I insert 12 as the `id` .This will be really handy when you want to perform data fetching in the next page like checkout page in e-commerce website. I also use backtick ```` instead of normal quote `''` so that I can easily pass my variable or state.

And in order to access the parameter that we pass, we can use `useParams()`.

Example:
```
const TouristDetails = () => {

// Note that I destructure the object that I received from useParams()
const {id} = useParams()

return <h1>{id}<h1>
}
```

I think thats all from me. Hope everything that I wrote can be implemented in your future project.