React Router

As opposed to traditional multi-page applications, SPAs only maintain one HTML file, commonly index.html. Instead of serving a different HTML file for each path, SPAs depend on client-side routing. React Router is a popular client-side routing library.

Routing is a process in which a user is directed to different pages based on their action or request. ReactJS Router is mainly used for developing Single Page Web Applications (SPA).  React Router is used to define multiple routes in the application. When a user types a specific URL into the browser, and if this URL path matches any 'route' inside the router file, the user will be redirected to that particular route.

Why use React router?

React Router plays an important role to display multiple views in a single page application. Without React Router, it is not possible to display multiple views in React applications. Most of the social media websites like Facebook, Instagram uses React Router for rendering multiple views.

React Router uses component structure to call components, which display the appropriate information. React router also allows the user to utilize browser functionality like the back button, and the refresh page, all while maintaining the correct view of the application.

React Router Installation

React contains three different packages for routing. These are:

1.  react-router: It provides the core routing components and functions for the React Router applications.

2.    react-router-dom: It is used for web applications design.

3.    react-router-native: It is used for mobile applications.

Step 1: Install React Router

It is not possible to install react-router directly in your application. To use react routing, first, you need to install react-router-dom modules in your application. The below command is used to install react router dom.

  npm install react-router-dom

Step 2: Make Four components.

In our project, we will create four more components in the directory called Pages along with App.js, which is already present.

Pages/Home.js

import React from "react";

export default function Home() {

  return (

    <div>

      <h1>Home Page</h1>

    </div>

  );

} 

Pages/About.js

import React from "react";

export default function About() {

  return (

    <div>

      <h1>About Page</h1>

    </div>

  );

} 

Pages/Contact.js

import React from "react";

export default function Contact() {

  return (

    <div>

      <h1>Contact Page</h1>

    </div>

  );

} 

Pages/Navbar.js

import React from "react";

export default function Navbar() {

  return (

    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">

      <div className="container-fluid">

        <ul className="nav navbar-nav">

          <li className="nav-item">

            <a href="/" className="nav-link" exact>

              Home

            </a>

          </li>

          <li className="nav-item">

            <a href="/about" className="nav-link" exact>

              About

            </a>

          </li>

          <li className="nav-item">

            <a href="/contact" className="nav-link" exact>

              Contact

            </a>

          </li>

        </ul>

      </div>

    </nav>

  );

}

Step 3: Setup App.js for Routing

App.js

import React from 'react';

import Navbar from "./Pages/Navbar";

import Home from "./Pages/Home";

import About from "./Pages/About";

import Contact from "./Pages/Contact";

function App() {

  return (

      <div className="App">

         <Navbar />

         <Home />

         <About />

         <Contact />

      </div>

  );

}

export default App; 

For Routing, open the app.js file and import all the four component files in it. Here, you need to import line: 

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

which helps us to implement the Routing. Now, our app.js file looks like below.

BrowserRouter as Router

First, you'll need to set up your app to work with React Router. Everything that gets rendered will need to go inside the <BrowserRouter> element, but we just rename BrowserRouter as Router only to reduce the long name of the BrowserRouter. so wrap your App in those first. It's the component that does all the logic of displaying various components that you provide it with.

import React from "react";

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

import Navbar from "./Pages/Navbar";

import Home from "./Pages/Home";

import About from "./Pages/About";

import Contact from "./Pages/Contact";

function App() {

  return (

    <Router>

      <div className="App">

        <Navbar />

        <Home />

        <About />

        <Contact />

      </div>

    </Router>

  );

}

export default App;

Switch

Next, in your App component, add the Switch element (open and closing tags). These ensure that only one component is rendered at a time. It checks each route for a match sequentially and stops once the first match is found.

function App() {

  return (

    <Router>

      <div className="App">

        <Navbar />

        <switch>

          <Home />

          <About />

          <Contact />

        </switch>

      </div>

    </Router>

  );

}

You notice that we put <Navbar /> component outside the switch, because we want that navbar will be visible on each component that render.

Route

It's now time to add your <Route> tags. These are the links between the components and should be placed inside the <Switch> tags.

To tell the <Route> tags which component to load, simply add a path attribute and the name of the component you want to load with component attribute. The <Route> will return null in case the specified URL doesn’t match the defined path.

 

function App() {

    return (

      <Router>

        <div className="App">

          <Navbar />

          <switch>

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

            <Route path="/about" exact component={About} />

            <Route path="/contact" exact component={Contact} />

          </switch>

        </div>

      </Router>

    );

  }  

When the route matches /, the application shows the Dashboard component. When the route is changed by clicking the “About” link to /about, the Dashboard component is removed and the About component is inserted in the DOM.

Notice the exact attribute. Without this, path="/" would also match /about, since / is contained in the route.  However, we want  ‘/’ to match only our render function, hence using ‘exact’ explicitly achieves this.

Step 4: Adding Navigation Link

Link

Sometimes, we want to need multiple links on a single page. When we click on any of that particular Link, it should load that page which is associated with that path without reloading the web page. To do this, we need to import <Link> component in the Navbar.js file. The Link component is used to trigger new routes. You import it from react-router-dom, and you can add the Link components to point at different routes, with the to attribute. It is the equivalent of anchor tags: <a> </a>.

So now we should update Navbar.js for providing Navigation link in react application by replacing <a> tag to <Link> Tag and 'href' to 'to' attribute.  

Pages/Navbar.js

import React from "react";

import { Link } from "react-router-dom";

export default function Navbar() {

  return (

    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">

      <div className="container-fluid">

        <ul className="nav navbar-nav">

          <li className="nav-item">

            <Link to="/" className="nav-link" exact>

              Home

            </Link>

          </li>

          <li className="nav-item">

            <Link to="/about" className="nav-link" exact>

              About

            </Link>

          </li>

          <li className="nav-item">

            <Link to="/contact" className="nav-link" exact>

              Contact

            </Link>

          </li>

        </ul>

      </div>

    </nav>

  );

} 

404 Page Not Found

A common use case for when you’re building a web app is to have a “catch all” route that will be rendered if none of your other routes match. A common example of this would be a 404 page.

To create a client side "404 not found" fallback all you need to do is make use of a <Route /> component with a non-greedy matching path. Create your NotFound component, i.e. the page which will display 404 error message:

Pages/NotFound.js

import React from "react";

export default function NotFound() {

  return (

    <div>

      <h3>404 page not found</h3>

      <p>We are sorry but the page you are looking for does not exist.</p>

    </div>

  ); 

Let's add <NotFound /> component to routes configuration, using * as a value of the path parameter to get a non-greedy matching.

It is important to remember that the 404 route needs to be declared in the very bottom of your routes configuration, so the <Route /> is only mounted if any of the routes' path declared above are not matched:

App.js

import NotFound from "./Pages/NotFound";

function App() {

  return (

    <Router>

      <div className="App">

        <Navbar />

        <switch>

          {/* Other Page Routes */}

          <Route component={NotFound} />

        </switch>

      </div>

    </Router>

  );

}

export default App; 

See the example below, try to enter some non valid url to see 404 page:

Displaying List in React

Lists are very useful when it comes to developing the UI of any website. Lists are mainly used for displaying menus in a website, for example, the navbar menu. In regular JavaScript, we can use arrays for creating lists. We can create lists in React in a similar manner as we do in regular JavaScript. We will see how to do this in detail further in this article.

Using JSX we can show lists using JavaScript's built-in Array.map() method. The .map() method is often used to take one piece of data and convert it to another. In our scenarios, we are taking data and converting it to a piece of our view.

A Simple Example

Let's say we have a list of array that we want to show in a list:

 

import React from "react";

export default function ArrayMap() {

  const arr = [10, 20, 30, 40, 50];

  const newArr = arr.map(function (num) {

    console.log("Num", num);

    return <li>{num * 2}</li>;

  });

  console.log("Old Array", arr);

  console.log("New Array", newArr);

  return <ul>{newArr}</ul>;

}

  

This component uses Array’s built-in map function to create a new array newArr that has the same number of elements, and where each element is the result of calling the function you provide. The {} brackets are used to render the array of elements.

import React from "react";

export default function ArrayMap() {

  const arr = [10, 20, 30, 40, 50];

  return (

    <ul>

      { 

arr.map((num) => {

        return <li>{num}</li>;

      })}

    </ul>

  );

} 

 

The above is the shorthand code for write the map function. Since we are not doing anything in the function's block body, we can also refactor it to a concise body and omit the return statement and the curly braces for the function body:

return (

  <ul>

    {arr.map(num =><li>{num}</li>)}

  </ul>

);

Rendering lists inside Components

So from the component’s point of view, we have to pass a list to a component using props and then use this component to render the list to the DOM. We can update the above code in which we have directly rendered the list to now a component that will accept an array as props and returns an unordered list. 

 

const mylist = [10, 20, 30, 40, 50];

const App = () => <ListComponent list={mylist} />;

const ListComponent = ({ list }) => (

  <ul>

    {list.map((item) => (

      <li>{item}</li>

    ))}

  </ul>

);

export default App;

You can see in the above output that the unordered list is successfully rendered to the browser but a warning message is logged to the console.  

Warning: Each child in an array or iterator

         should have a unique "key" prop 

The above warning message says that each of the list items in our unordered list should have a unique key. A “key” is a special string attribute you need to include when creating lists of elements in React. We will discuss about keys in detail in further articles. For now, let’s just assign a key to each of our list items in the above code.

Below is the example where we display the list of Objects with keys.  

 

Display Object List in React

Displaying items from a list of objects in React is very simple. We can iterate over a list of objects using the .map() method in React JSX. Here is the example in which we mapped a list of objects and displayed them in the React app.

 

import React, { useState } from "react";

import "../node_modules/bootstrap/dist/css/bootstrap.css";

export default function DemoMap() {

  const [user, addUser] = useState([

    {

      id: 1,

      username: "pankkap",

      password: "pankaj123",

    },

    {

      id: 2,

      username: "manishkumar",

      password: "manish456",

    },

    {

      id: 3,

      username: "sachinyadav",

      password: "sachin789",

    },

  ]);

  const renderUser = (user, index) => {

    return (

      <tr key={index}>

        <td>{user.id}</td>

        <td>{user.username}</td>

        <td>{user.password}</td>

      </tr>

    );

  };

  return (

    <div className="container mt-3">

      <table class="table">

        <thead class="thead-light">

          <tr>

            <th>#</th>

            <th>User name</th>

            <th>Password</th>

          </tr>

        </thead>

        <tbody>{user.map(renderUser)}</tbody>

      </table>

    </div>

  );

}

Output:

The key attribute is necessary for React to identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. Since React uses a virtual DOM and depends on the key to identifying items of a list, so in the above list example, we provided a unique id to every list item.