Navigating single page applications with React Router.

When developing an application, we may want to start with a single page application (SPA). A SPA is a website that re-renders its content to a new set of content without making a request to the server to fetch new HTML. A single page application utilizes navigation to give the user the feel of multiple pages in one. One way to incorporate navigation into our SPA is to use react router

Getting started with React Router
If using React as a front-end framework, we will not be able to route through different parts of our application solely with react. We will need the help of another library called react-router. If using the node package manager, we First we need to

npm install react-router-dom

After installing the dependency, we can now create a component that will house these navigation links and routes. We can put these routes in the parent component of the app., but these routes may be larger and space consuming so let us just create a component called Navigation.jsx.

Using React Router
Next, we will need to get access to the library we just installed. We need to Import react-router-dom and all the built-in goodies it gives us access to. HashRouter or its alias Router will be the outer tags that all our routes and links will be contained in. For now, we will import Link in.

import React, { useState, useEffect } from 'react';
import {
  HashRouter as Router,
  Link,
} from 'react-router-dom';

Now that we have what we need imported in we can create a class or functional component. Here I chose to you functional. Inside the return we add our router tags and inside them some structural tags such as divs, li, and ul. Next, we will put a Link to tag. this is equivalent to putting a href tag, it creates a clickable link to the multiple pages we will render. With this tag we create a path that we will use later and the name of the link e.g. Home, Login, Profile. Tak a look at the code below.

const Navigation = () => {
  return (
    <Router>
      <div>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/login">Login</Link>
            </li>
            <li>
              <Link to="/profile">Profile</Link>
            </li>
          </ul>
      </div>

Switching between pages

The next two things to add to the imports is the Switch and Route tag. Under the link tags we can add the switch tag. the switch tags will allow us to switch between different pages. so, within the switch tag we will set up our routes to the multiple pages we will have. You will also notice that we imported some other components. We will be setting up the routes to these components.

import React, { useState, useEffect } from 'react';
import {
  HashRouter as Router,
  Switch,
  Route,
  Link,
} from 'react-router-dom';
import Profile from './Profile.jsx';
import Home from './Explore.jsx';
import Login from './Login.jsx';

const Navigation = () => {
  return (
    <Router>
      <div>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/login">Login</Link>
            </li>
            <li>
              <Link to="/profile">Profile</Link>
            </li>
          </ul>
        <Switch>
          <Route path="/login">
            <Login />
          </Route>
          <Route path="/profile">
            <Profile />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
};

Above, in the switch tag we put a route tag and here we will set the route for a certain path. the path is the path to the page you want. So, in our case we need a path to the home page, profile page, and explore page. Once we set the paths, we will render those components. So right now in our application, when we click on the link to either page it should render what ever is inside that component.

Conclusion

We have just set up a basic routing system that makes it so that we can have multiple pages in our single page application. React router comes with more build in things that allows us to make our navigation more dynamic the more complicated our components get. There is ae some built in hooks that also makes our life much easier with navigation.