React router

React is a pretty vast library with rich inbuilt components and APIs available to ease the developer’s life. Among these, we have a very impressive library available that is React router. So let’s have a deep dive inside react router.

 

Which route should I take here …. ?? ???   

Page your data with react router

Golden Rule: Things are always easy to understand when you do it by urself instead of just reading it out, so let’s get our hand dirty ?. We will start by creating a react app. Just type following commands on your terminal.

 

npx create-react-app react-router-example

cd react-router-example

npm start

 

Once you run the above commands you would have created your own react-app which would have been hosted on your localhost with the port 3000. Once this is done let’s see what’s in there ?.

Page your data with react router

Open the application in any code editor and If you will see inside the public folder, there will a file named as index.html.

 

A crucial point to notice here is that we have only one HTML file which implies that currently, we have a single-page app.

 

Here we are reusing this single HTML page for the rendering of multiple components using routing.

 

To start the dive first install react router in your application using below command.

 

npm install react-router-dom

 

weird huh ?? why the command has react-router-dom if I have to install something called as react-router because react router is the core library which includes everything related to routing or navigation.

React-Router: Let’s unwind another mystery in React
And here we only need react-router-dom to understand and manage the routing in our application.

react-router-native will be required for handling the routing on native-mobile applications.

react-router-redux is required for binding of your react-application with the redux library i.e when you want to manage your routing using redux. Ideally, it is avoided.

So, In general, to manage to route in browser-based application react-router-dom is the best application.

 

react-router-dom provides some components such as Link, BrowserRouter, Route, Switch which we will be discussing while creating our application. So Let’s create some of the components which we will be navigating from our home page.

  • Make two folders named as images and components inside the src folder.
  • download a couple of images whatever you like and move them in images.
  • create two files named as IceLand.js and Norway.js.

 

. Then paste the following code inside those files respectively.

 

IceLand.js

 

import React, { Component } from "react";

import iceland from "../images/iceLand.jpeg";




const layoutStyle = {

margin: 20,

padding: 20,

border: "1px solid #DDD"

};




export default class Iceland extends Component {

render() {

return (

<div style={layoutStyle}>

<h1>IceLand</h1>

<img src={iceland} alt="Iceland" height = {400} width = {900} />

</div>

);

}

}

 

Norway.js

 

import React, { Component } from "react";

import norway from "../images/norway.jpeg";

const layoutStyle = {

margin: 20,

padding: 20,

border: "1px solid #DDD"

};




export default class Norway extends Component {

render() {

return (

<div style={layoutStyle}>

<h1>Norway</h1>

<img src={norway} alt="norway" height = {400} width = {900} />

</div>

);

}

}

 

Also, modify index.js as below

 

import React from "react";

import ReactDOM from "react-dom";

import "./index.css";

import * as serviceWorker from "./serviceWorker";


import App from "./App";

import IceLand from "./components/IceLand";

import Norway from "./components/Norway";

import { BrowserRouter as Router, Route } from "react-router-dom";


const routing = (

<Router>

<Route path="/iceland" component={IceLand} />

<Route path="/norway" component={Norway} />

<Route path="/" component={App} />

</Router>

);


ReactDOM.render(routing, document.getElementById("root"));

serviceWorker.unregister();

</Router>

);


ReactDOM.render(routing, document.getElementById("root"));

serviceWorker.unregister();

 

And woah!!! you are in north !!! 😉 is winter is there ??? Hahaha.

Page your data with ReactJs Pagination

So if you hit the URL as http://localhost:3000/ then you can see your home page that is our App component here, and if you hit the URL http://localhost:3000/iceland I can see your Iceland component to be rendered, and same goes with Norway.

 

Just for Information purpose, it will look something like this

 

Page your data with Reactjs routing

 

Page your data with Reactjs routing

Yeah, there will be some difference based on pictures you download.

 

Okay moving forward whats dis ??? Your home page i.e.your App component is getting loaded with the other pages too. Why this is not right …. ???

 

That’s because inside route the path given for your Home page is a slash which is also there in other routes i.e “/norway” or “/iceland”. To avoid this issue we use exact prop inside Route component which defines the exact path. Change your code in index.js as follows

 

import React from "react";

import ReactDOM from "react-dom";

import "./index.css";

import * as serviceWorker from "./serviceWorker";


import App from "./App";

import IceLand from "./components/IceLand";

import Norway from "./components/Norway";

import { BrowserRouter as Router, Route } from "react-router-dom";


const routing = (

<Router>

  <Route path="/iceland" component={IceLand} />

  <Route path="/norway" component={Norway} />

  <Route exact path="/" component={App} />

</Router>

);


ReactDOM.render(routing, document.getElementById("root"));

serviceWorker.unregister();

 

So with this, we have enabled a routing feature in out ap[plication which loads different components based on different routes. But writing a URL every time on the browser is obviously not a good idea, so let’s create navigation in our home page using Link component. Change app.js with the following code

 

import React from "react";

import ReactDOM from "react-dom";

import "./index.css";

import * as serviceWorker from "./serviceWorker";


import App from "./App";

import IceLand from "./components/IceLand";

import Norway from "./components/Norway";

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const routing = (

<Router>

<Route path="/iceland" component={IceLand} />

<Route path="/norway" component={Norway} />

<Route exact path="/" component={App} />

</Router>

);




ReactDOM.render(routing, document.getElementById("root"));

serviceWorker.unregister();

 

And now we have navigation available too. Yee pee!!!!

 

Let us also add Switch component in our app. But what does it do ??? So Don’t you think our application should have a page which should be rendered whenever we request for a URL which doesn’t match any existing URLs in our app. The switch component handles this for us…It compares all the available routes and if nothing matches out it falls back to the default option.

 

To achieve this add the following code in index.js

 

import React from "react";

import ReactDOM from "react-dom";

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import "./index.css";

import * as serviceWorker from "./serviceWorker";


import App from "./App";

import IceLand from "./components/IceLand";

import Norway from "./components/Norway";

import WrongRoute from "./components/WrongeRoute";


const routing = (

<Router>

<Switch>

<Route path="/iceland" component={IceLand} />

<Route path="/norway" component={Norway} />

<Route exact path="/" component={App} />

<Route component={WrongRoute} />

</Switch>

</Router>

);


ReactDOM.render(routing, document.getElementById("root"));

serviceWorker.unregister();

 

So now if you hit any wrong URL you can see this page.

 

Obviously, there are many more things to talk about, but this is more or less you must have to know before doing anything related routing in your Application.

 

If you’ve any doubts, please let us know through comment!!

Follow Us on Facebook | Twitter | LinkedIn.

Let CronJ assist you..!

Thank you !!!