React Router: Understanding How We Interact with Web Pages Today

#react #javascript #html #programming

Have you ever wondered how modern web pages functioned? I remember I always wondered how it was that web pages were able to store so many different pages, forms, and information. It always seemed like a vast library to me. As I initially learned Javascript in a coding bootcamp at Flatiron School, I thought it was exciting that I was able to learn basic code, but I was disappointed that I wasn't learning how actual web pages functioned. It seemed like there was a big disconnect. What does a "for-loop" have to do with creating a website that can store my information under my username? Well, up until we started learning React, I had no idea. But once we started learning about React and React Router, I learned that there is a way, built on basic Javascript and HTML, that we can create websites with different pages that allow us to metaphorically create a vast building with a complex structure and rich interior.

What is React Router?

React Router is a program that provides comprehensive human interaction with a webpage. One of the ways that I'll highlight this is through URL route matching. To understand URL route matching, we first need to understand location. To demonstrate, I'll use a website that I'm currently building with some others at Flatiron School. It's still a work in progress, but I'm eager to show what we have. Here is a picture of our website home.

As you can see, there are the words "Home", "Search", and "Favorites" near the top. What React Router allows us to do is we can click on each of these words and they can take us to a different "room" of the building of our website. In other words, they can take us to another page of the website. At the click of one of those words, we change the URL, and we are sent to another page.

How does React Router work?

As I mentioned, when I click on one of those words, we are sent to another page of the website. But what happens under the hood? Well, let's take a look at part of our App.js.

import React, { useEffect, useState } from 'react';
import { Route, Switch } from 'react-router-dom';
import Header from './Header';
import NavBar from './NavBar';
import Search from './Search';
import Favorites from './Favorites';
import Home from './Home';
import '../assets/css/App.css';

//...code here...

return (
    <div className='app'>
      <Header />
      <NavBar />
      <Switch>
        <Route exact path='/search'>
          <Search />
        </Route>
        <Route exact path='/favorites'>
          <Favorites />
        </Route>
        <Route exact path='/'>
          <Home />
        </Route>
      </Switch>
    </div>
  );

First, we import Route and Switch from react-router-dom. What Route does for us is render the page that we want it to based on what the current URL is. That is, if the url ends with '/search', it will dispaly the search component. The other components still exact, but route allows us to render them as null so they are invisible to the eye. Switch is what allows us ro freely look for other components by changing the URL. Once we call another component through the URL such as '/favorites', that component will render instead because of switch.

How then do we get it to appear in a bar at the top of the page? Let's take a look at NavBar.

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

function NavBar() {
  return (
    <>
      <NavLink exact to='/'>
        Home
      </NavLink>
      <NavLink exact to='/search'>
        Search
      </NavLink>
      <NavLink exact to='/favorites'>
        Favorites
      </NavLink>
    </>
  );
}

In our NavBar component, we import NavLink. This allows us to do multiple things at once. Not only can we set our URLs and where they will take us, but they can also make it so that when we click on those words, they take us to the new page. The NavBar component then renders the bar we see up top with these words. Now, we have full functionality of our multiple pages, and we've only rendered a single page website! React Router is pretty awesome.

So Should I Learn React Router?

With the way that web pages function now, it only makes sense to learn how React Router works. It's ultimately pretty simple as well. Everything still functions as components, but you have a clean way of putting them all on a page. I'm excited to learn more about React Router given its versatility, so I hope you are, too!