Guide To : React Routing !

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.