Routing in React

Let's see client-side routing and rendering followed out in react.

TL;DR

Ever wondered we were roaming under single page applications till date, it's changing as we progress. Routing is actually concerned with network connections as we find a path to specific route in the network that's all concerned with the server's and can't be managed with react. But react has a solution using promise based routing within the client side.

Routing and Rendering

Multipage applications comes with data distributed to pages across the network. So the server looks for request from user to navigate to the same.

Routing is the process through which the user is navigated to different pages on a website. Rendering is the process of displaying those pages on the UI. Every time you request a route to a particular page, you are also rendering that page.

Applications performance and speed is solely concerned with the pages rendered to the UI and the routes available also time to render those too.

Client-side Routing

Rather than the server handling the requests from user and serving the same to browser, JavaScript handles all the routing within the clients browser, as when a user clicks on a link routed to a different page the URL changes and the specified components get rendered to the UI(that could be HTML or JSX). In this case the whole page ain't gonna re-render but gives a smooth navigation to the route.

Client-side Routing in React

Using the promise based architecture the single-page application renders the appropriate information from the DOM component structure which gives react applications the seamless user experience.

Here we use third party dependency react router, which uses dynamic routing for optimal user experience by rendering the component specified within the route.

Setup React Router

We use NPM command to install react router to the root of the project file.

npm install react-router-dom

React Router in action

Let's build a simple routing application.

index.js

Here we define the routes available within the application and the specified component to be rendered when URL gets the specific path.

import React from 'react';
// react router
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
// pages within the application
import Home from './Home';
import About from './About';
import People from './People';
import Error from './Error';
// navbar
import Navbar from './Navbar';

const ReactRouter = () => {
  return <Router>
    <Navbar />
    <Switch>
      <Route exact path='/'>
        <Home />
      </Route>
      <Route exact path='/about'>
        <About />
      </Route>
      <Route exact path='/people'>
        <People />
      </Route>
      <Route path='*'>
        <Error />
      </Route>
    </Switch>
  </Router>
};

export default ReactRouter;

Navbar.js

Here we link the user clicks to specific route.

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

const Navbar = () => {
  return <nav>
    <ul>
      <li>
        <Link to='/'>Home</Link>
      </li>
      <li>
        <Link to='/about'>About</Link>
      </li>
      <li>
        <Link to='/people'>People</Link>
      </li>
    </ul>
  </nav>;
};

export default Navbar;

Major Takeaway

Client-side routing is carried out in react using promise based architecture which gives application seamless user experience

Let's connect 🔗

Catch me here 👇

https://shamaayilahmed.tech/

Hope you all liked the post, share your impressions and queries below 🙌

Shamaayil Ahmed