DEV Community: janjibDEV

Guide To : React Routing !

janjibDEV — Thu, 19 Aug 2021 15:35:58 +0000

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 :

Router
Switch
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.

Problem with react-router app and Github Pages (Solved !)

janjibDEV — Mon, 02 Aug 2021 10:36:29 +0000

Introduction

Everyone must have using the GitHub pages to deploy their React project to the internet. And of course, building a react app with the react-router library is a must when you are building a multi-page app. However, you will notice some problems when deploying the react-router app to the GitHub pages.

This view will be displayed when we deploy react router app to GitHub pages :

The solution is to change our path of the route in our app:



import './App.css';
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom'
import Homepage from './components/Homepage';
import SecondPage from './components/SecondPage';

function App() {
  return (
    <div className="App">
     <Router>
       <Switch>
         <Route path='/' exact component={Homepage}/>
         <Route path='/secondpage' exact component={SecondPage}/>
       </Switch>
     </Router>
    </div>
  );
}

export default App;

Notice the route tag , now we gonna change the path.

the formula is by putting your app name (according to your repository name) at the beginning of the path (after / ) for the main page and other pages, just add the additional page behind the home path.

Formula : '/{your-app-name}/{route to another path}'

Like this :

let say my app name is problem-showcase



import './App.css';
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom'
import Homepage from './components/Homepage';
import SecondPage from './components/SecondPage';

function App() {
  return (
    <div className="App">
     <Router>
       <Switch>
         <Route path='/problem-showcase' exact component={Homepage}/>
         <Route path='/problem-showcase/secondpage' exact component={SecondPage}/>
       </Switch>
     </Router>
    </div>
  );
}

export default App;

See how I change the path of the route?

The same thing goes when you use Link or useHistory in your app



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

const Homepage = () => {
    let history = useHistory()
    return (
        <div>
            <h1>Homepage</h1>
            <button onClick={()=>history.push('/secondpage')}>Click here</button>
        </div>
    )
}

export default Homepage

note that I used useHistory from react-router-dom to navigate to the second page

Since we have to change the path for the second page, we also need to change the path to the second page when using useHistory

Like this:



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

const Homepage = () => {
    let history = useHistory()
    return (
        <div>
            <h1>Homepage</h1>
            <button 
             onClick={()=>history.push('/problem-showcase/secondpage')}>
              Click here 
            </button>
        </div>
    )
}

export default Homepage

So, just note that we need to change the path to our route in the entire app.

So now we can deploy our react-router app to Github pages. You can refer to this GitHub repository for the deployment.

Deploy react app to gh-pages

Just make sure your homepage URL (project repository name) in package.json is the same as the homepage path.



"homepage": "http://{your github name}.github.io/{your repository name}"

<Route path='/{your repository name}' exact component={Homepage}/>

Example:



"homepage": "http://janjib.github.io/problem-showcase"

<Route path='/problem-showcase' exact component={Homepage}/>

Done.

This is the link to my Github repository:
Click here !