Creating a SPA that behaves as MPA with React

Take advantage of React virtual DOM and create a single page application that behaves as a multiple page application. React Router DOM is a great tool to make this possible; in this article, I will explain how to use it.

First things first

Create a react application using the command

npx create-react-app

app-name

. Set up your repo if you'd like, and let's get started!

How it works

React Router DOM will give the user the impression that is using a multiple page application. It takes advantage of the history or URL to render the view that you desire. This is particularly important if you want the user to go back to the previous render by clicking on the "go back to the previous page" button on the web browser.

"Hello, world!"

If you haven't already, install react-router-dom either using npm or yarn. Set up your project as you want, and let's go to the App.js file. Once you are on the file, erase everything and leave:

// App.js
import React from 'react';

export default function App() {
  return (
    <div>
    </div>
  )
}

Now, we will be adding the React Router. Your file will now look something like this:

// App.js
import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from 'react-router-dom';

export default function App() {
  return (
    <div>
    </div>
  )
}

Quick element review:

Router: This is the element that keeps track or the URL. This element provides the information to the other components to render the desired view.

Switch: This is the conditional component that changes the views.

Route: This is the component that renders the UI when the URL matches the path.

Link: This is the component that changes the URL.

Taking the previous components into consideration, this is how a basic "Hello, world" program would be:

Next steps

The "hello, world" program is straightforward, but when you start to modularize your code and create new files for each component, you can start adding more elements to it. For example, change the URL from within a rendered view, using the link. Like this:

<Route exact path="/world">
  <Link to="/">Home</Link>
  World
</Route>

The possibilities from now on are limitless. You can generate a sophisticated SPA that looks similar to a MPA, but render faster since they don't have to communicate with a server.

More tools

The components mentioned in this article can be limiting, that's why I am going to show you additional ones, in the form of hooks:

useParams: In the case, you are wondering how to render an infinite possibility of cases (like render a user homepage), you can use a Route similar to:

<Route path="/users/:id">
  <Component />
</Route>

Inside the component element, we can use the hook use params to retrieve that id and use it. Here is a code of how it will work:

// Component.js
import React from 'react';
import { useParams } from 'react-router-dom';

export default function Component() {
const { id } = useParams();
  return (
    <div>
      { id }
    </div>
  )
}

What this code does, is it renders the id parameter provided by the URL. Now you can use the API to retrieve that user's information!

useHistory: In case you want to change the URL using a function, this is the right hook. This is how you can use it:

// Component.js
import React from 'react';
import { useHistory } from 'react-router-dom';

export default function Component() {
const history = useHistory();
const handleClick = () => {
  history.push('/home');
};
  return (
    <div>
      <button type="button" onClick={handleClick}>
        Click me!
      </button>
    </div>
  )
}

Of course, in the previous example, I could use a link component, but it was designed to show the use of useHistory. It works better if you create a variety of elements from an array or an object literal, and don't know the correct path until rendered.

This is just a scratch.

The examples shown above are basic ones compared to the actual possibilities of React Router DOM. I encourage you to continue working and creating applications and projects to start testing the advantages of this tool.

Happy coding!