ReactJS | Routing

Hello folks! welcome back to a new section of our tutorial on ReactJS. In this section of our tutorial on ReactJS, we will be studying about Routing in ReactJS.

In web application, Routing is a process of binding a web URL to a specific resource in the web application. In React, it's binding an URL to an component. React does not have support for routing natively as it is basically an user interface library. React community gives many third party component to handle routing in React application. Let us discuss React Router, a top choice routing library for React application.

Install React Router

Let us learn how to install the React Router component in our Expense Manager App.

Open a command prompt and go to the root folder of our application.

cd /go/to/expense/manager

Next, install the react router using the below command.

npm install react-router-dom --save

Concept

React router provides four components to manage navigation in React application.

Router

Router is a top level component. It encloses the entire application.

Link

Similar to anchor tag in HTML. It is used to set the target url along with reference text.

<Link to="/">Home</Link>

Here, to attribute sets the target attribute.

READ: ReactJS | Formik

Switch and Route

Switch and Route are used simultaneously. Maps the target url to the react component. Switch is the parent component and Route is the child component. Switch component can have many Route component and each Route component mapping a specific url to a component.

<Switch>
   <Route exact path="/">
      <Home />
   </Route>
   <Route path="/home">
      <Home />
   </Route>
   <Route path="/list">
      <ExpenseEntryItemList />
   </Route>
</Switch>

Here, path attribute is used to match the url. Basically, Switch works similar to traditional switch statement. It matches the target url with each child route (path attribute) one by one in an order and invoke the first matched route.

Along with router component, React router provides option to get set and get dynamic information from the url. For example, in an article website, the url may have article type attached to it and the article type need to be dynamically extracted and has to be used to fetch the specific type of articles.

<Link to="/article/c">C Programming</Link>
<Link to="/article/java">Java Programming</Link>

...
...

<Switch>
  <Route path="article/:tag" children={<ArticleList />} />
</Switch>

Then, in the child component.

import { withRouter } from "react-router"

class ArticleList extends React.Component {
   ...
   ...
   static getDerivedStateFromProps(props, state) {
      let newState = {
         tag: props.match.params.tag
      }
      return newState;
   }
   ...
   ...
}
export default WithRouter(ArticleList)

Here, WithRouter enables the ArticleList component to access the tag information through props.

Same can be done differently in functional components.

function ArticleList() {
   let { tag } = useParams();
   return (
      <div>
         <h3>ID: {id}</h3>
      </div>
   );
}

Here, useParams is a custom React Hooks provided by React Router component.

Nested Routing

React router also supports nested routing. React router provides another React Hooks, useRouteMatch() for extracting parent route information in nested routes.

function ArticleList() {
   // get the parent url and the matched path
   let { path, url } = useRouteMatch();

   return (
      <div>
         <h2>Articles</h2>
         <ul>
            <li>
               <Link to={`${url}/pointer`}>C with pointer</Link>
            </li>
            <li>
               <Link to={`${url}/basics`}>C basics</Link>
            </li>
         </ul>

         <Switch>
            <Route exact path={path}>
               <h3>Please select an article.</h3>
            </Route>
            <Route path={`${path}/:article`}>
               <Article />
            </Route>
         </Switch>
      </div>
   );
}
function Article() {
   let { article } = useParams();
   return (
      <div>
         <h3>The select article is {article}</h3>
      </div>
   );
}

Here, useRouteMatch returns the matched path and the target url. url can be used for creating next level of links and path can be used to map next level of components.

READ: ReactJS | Form Programming

Creating Navigation

Now let us learn how to perform routing by creating the possible routing in our expense manager application. The minimum screen of the application are given below -

• Home screen - Landing or initial screen of the application.

• Expense list screen - Shows the expense items in a tabular format.

• Expense add screen - Add interface to add an expense item.

First, create a new react application, react-router-app using Create React App or Rollup bundler by following instruction in Creating a React application tutorial.

Next, open the application in your favorite editor.

Next, create an src folder beneath the root directory of the application.

Next, create a components folder under src folder.

Create a file, Home.js under src/component folder and start editing.

Next, import React library.

import React from 'react';

Next, import Link from React router library.

import { Link } from 'react-router-dom'

Create a class, Home and call constructor with props.

class Home extends React.Component {
   constructor(props) {
      super(props);
   }
}

Next, add render() method and then display the welcome message and links to add and list expense screen.

render() {
   return (
      <div>
         <p>Welcome to the React tutorial</p>
         <p><Link to="/list">Click here</Link> to view expense list</p>
         <p><Link to="/add">Click here</Link> to add new expenses</p>
      </div>
   )
}

Finally, export the component.

export default Home;

The full code of the Home component is as follows -

import React from 'react';
import { Link } from 'react-router-dom'

class Home extends React.Component {
   constructor(props) {
      super(props);
   }
   render() {
      return (
         <div>
            <p>Welcome to the React tutorial</p>
            <p><Link to="/list">Click here</Link> to view expense list</p>
            <p><Link to="/add">Click here</Link> to add new expenses</p>
         </div>
      )
   }
}
export default Home;

Next, create an ExpenseEntryItemList.js file under src/components folder and create an ExpenseEntryItemList component.

import React from 'react';
import { Link } from 'react-router-dom'

class ExpenseEntryItemList extends React.Component {
   constructor(props) {
      super(props);
   }
   render() {
      return (
         <div>
            <h1>Expenses</h1>
            <p><Link to="/add">Click here</Link> to add new expenses</p>
            <div>
               Expense list
            </div>
         </div>
      )
   }
}
export default ExpenseEntryItemList;

READ: ReactJS | Http Client Programming

Now, create an ExpenseEntryItemForm.js file under src/components folder and create an ExpenseEntryItemForm component.

import React from 'react';
import { Link } from 'react-router-dom'

class ExpenseEntryItemForm extends React.Component {
   constructor(props) {
      super(props);
   }
   render() {
      return (
         <div>
            <h1>Add Expense item</h1>
            <p><Link to="/list">Click here</Link> to view new expense list</p>
            <div>
               Expense form
            </div>
         </div>
      )
   }
}
export default ExpenseEntryItemForm;

Create a file, App.css under src/component folder and add generic css styles.

html {
   font-family: sans-serif;
}
a{
   text-decoration: none;
}
p, li, a{
   font-size: 14px;
}
nav ul {
   width: 100%;
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: rgb(235,235,235);
}
nav li {
   float: left;
}
nav li a {
   display: block;
   color: black;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 16px;
}
nav li a:hover {
   background-color: rgb(187, 202, 211);
}

Create a file, App.js under src/components folder and start editing. The purpose of the App component is to handle all the screens in one component. It configures routing and enable navigation to all other components.

Import React library and other components.

import React from 'react';

import Home from './Home'
import ExpenseEntryItemList from './ExpenseEntryItemList'
import ExpenseEntryItemForm from './ExpenseEntryItemForm'

import './App.css'

Next, import React router components.

import {
   BrowserRouter as Router,
   Link,
   Switch,
   Route
} from 'react-router-dom'

Write the render() method and configure the routing.

function App() {
   return (
      <Router>
         <div>
            <nav>
               <ul>
                  <li>
                     <Link to="/">Home</Link>
                  </li>
                  <li>
                     <Link to="/list">List Expenses</Link>
                  </li>
                  <li>
                     <Link to="/add">Add Expense</Link>
                  </li>
               </ul>
            </nav>

            <Switch>
               <Route path="/list">
                  <ExpenseEntryItemList />
               </Route>
               <Route path="/add">
                  <ExpenseEntryItemForm />
               </Route>
               <Route path="/">
                  <Home />
               </Route>
            </Switch>
         </div>
      </Router>
   );
}

Next, create a file, index.js beneath the src folder and use App component.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(
   <React.StrictMode>
      <App />
   </React.StrictMode>,
   document.getElementById('root')
);

Finally, create a public folder under the root folder and create index.html file.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>React router app</title>
   </head>
   <body>
      <div id="root"></div>
      <script type="text/JavaScript" src="./index.js"></script>
   </body>
</html>

Next, serve the application making use of npm command.

npm start

Next, open the web browser and then enter http://localhost:3000 in the address bar and press enter.

Try navigating the links and confirm that the routing is working.

READ: ReactJS | Material UI

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we are going to be studying about ReactJS Redux.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.