Client Side Routing

Welcome to my first blog post.

Most people would write a blog post to share their thoughts to other people but in my case this is more of a learning experience for myself.

So, I implemented client side routing within my most recent project without properly learning the exact functionality of it. This will be a quick crash course to explain to myself and the others reading this what exactly is client side routing.

A popular plugin to use with React is the React Router. The 'React Router' is the most popular client-side routing library. When used combined with React, allows for an interactive webpage that allows users to switch between different components rendering different content displaying on the page.

An example of importing the React router can be wrapped around the App within the index.js page as show:

<BrowserRouter>
   <App />
</BrowserRouter>

or you can directly import it within your App page and wrap it around elements that you want to "switch" between components.

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

For example, if your current app will have several different components as routes such as:

• /About
• /Home
• /Form
• /Users

We can import a 'Switch', 'NavLink', 'Link, or 'Redirect' so people can navigate and use our app to render those specific parts of our site like so.

<li>
  <Link to="/">Home</Link>
</li>
<li>
  <Link to="/about">About</Link>
</li>
<li>
  <Link to="/users">Users</Link>
</li>

This is just one of the many core functionalities of client-side routing. After learning about this, it allowed me to see all of the websites that I currently use in a new light. Reddit is a website that is built using React that I visit frequently. Now every time I use it, I wonder the immense amount of time and effort it took to code out the entire website as it contains an almost infinite amount of components as there are millions of subreddits.

Thank you for reading my incredibly novice attempt at explaining Client Side Routing.