React app using React Router V4 in Minutes…
At Tajawal, We are using react heavily and part of this experience is using react-router, before discussing react router, let’s start by getting more briefly about SPA (Single Page Application)
SPA (Single Page Application)
It’s a website that re-renders its content in response to navigation actions (e.g. clicking a link) without making a request to the server to fetch new HTML and without refreshing my page also.
In a Simple word, You don’t need to refresh or request the whole page when you click on any link
You can check this nice post for more about How Single-Page Applications Work
Now we can start with React Router V4
It’s a pure React rewrite of the popular React package and in this version, by making everything a Component
Routing
We have two modes of routing <BrowserRouter> and <HashRouter
1- BrowserRouter
It should be used when you have a server that will handle dynamic requests (knows how to respond to any possible URI).
2- HashRouter
It should be used for static websites (where the server can only respond to requests for files that it knows about)
and usually, it is preferable to use a <BrowserRouter> but if you are sure that the website will be static it will be good to use <HashRouter>
Let’s create our first react app using react router
we will create a simple application to route between Home page, About page and Team page
Create a new react application
The first step is to create a new react application and let’s call it routerapp using this command
create-react-app routerapp
After running this command you will see something like this in your app folder
Install React Router
After that you need to go to your folder name routerapp with this command cd routerapp
then you need to install react router and it’s command is
npm install react-router-dom --save
After installing react-router-dom open your folder in any editor you want.
Now we need to run our application using this command
npm start
and if this error sh react-scripts: command not found is displayed you will need to run npm install again to make sure that all dependencies are downloaded successfully.
Then you can run the previous command again npm start
After running that your browser will open with the view like this one
Now we will open the App.js file from src folder and then we will remove the code inside return function and add only empty <div></div> and also we will remove these two lines
import logo from './logo.svg';
import './App.css';and App.js file will be like this
Now we will import BrowserRouter, Route, and Link from react-router-dom
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'so now the file will be like this
and now inside return function we need to remove the empty <div></div> and use Router component instead and inside this component, we will add a simple unordered list using <ul><ul> element and let’s add inside the unordered list some elements with <li></li> element and instead of using anchors from HTML we will use Link from React Router
Now for sure you are asking about what’s the to prop ?
<Link>s use the to prop to describe the location that they should navigate to it
and now if you tried to click on any link from the above links after running the application you will notice that your page URL will change with the to prop value that you clicked on it
Now we need to link our links with their components
so will use <Route></Route> Component to link our links with their components
now inside Router component and in the bottom of <ul></ul> element, we will use our three routes to link our links with their components
so in the above code we are using <Route> component and pass to it some props like exact, path and component
1- exact
to make the path to match actually the assigned value to it for example in team route it will be matched on /team not /team/1
2- path
inside path, we will assign the path that we will link our component with it and with the Link after clicking on it
3- component
this is our component that will display when the path name changed
now we need to create our three components to switch between them when changing path names
so we will go to src folder and create new 3 files and inside every file we will import React, { Component } from ‘react’; and also extend a stateless functional component
Home Component
and make the same thing in the other two components
About Component
Team Component
and after creating the three components we need to import them into App.js file
so now when you try to click on any route it will render its component and display it.
Now we can add some enhancements to our code
firstly we can move the <ul></ul> element to be in a separated component and add for it some styles
so now we need to add a new file inside src folder and we will name it HeaderComponent.js
and we need to import something like
import React, { Component } from 'react';
import { Link } from 'react-router-dom';and also we need to add a stateless functional component called HeaderComponent.js and export it
now we need to remove the <ul></ul> element from App.js file
and App.js file
then we need to import our HeaderComponent in App.js like this import HeaderComponent from ‘./HeaderComponent’;
then we can use it inside Router component like this <HeaderComponent></HeaderComponent>
so the final code for App.js file will be like this.
Now when we check our view now it will be something like this
Finally, the latest thing that we need to do we need to add something like condition to check if the path name in URL is not existed to display an error message
so, in this case, we will need to import a new thing from react-router-dom and it’s called Switch and we will make it as a wrapper for all our routes like this
<Switch>
<Route exact path='/' component={HomeComponent}></Route>
<Route exact path='/about' component={AboutComponent}></Route>
<Route exact path='/team' component={TeamComponent}></Route>
</Switch>and also we will need to add a new route with a new component to display when the path name doesn’t exist
<Route component={NotFoundComponent}></Route>and now we need to create a new component called NotFoundComponent inside src folder.
and add for it a small message 404 — Sorry this page is not found
and the component will be like this
and now we need to import it into App.js file
Now when I change path name to be anything not existed our message will display directly like this
and you can find the whole code in sandbox link
