Let’s make a micro SPA using ReactJS and react-router-dom plugin!

ReactJS is a not-so-opinionated framework, so anyone can freely create the best solution for them. For my solution, I decided to make my own <AppRouter /> component to create a multi-page feel.

This project is in GitHub!

Create a ReactJS app

npx create-react-app react_spa_router_demo

Run the app!

cd react_spa_router_demo
npm start

Clean up App.js of defaults

To initialize setup for the Router component and Pages, let’s take out the defaults that came with the App.js file.

The App.js should now look like this:

import React from "react";
import './App.css';

function App() {
   return (
      <div id="app" classname="container">
         <h1>Hi</h1>
      </div>
   )
}

export default App;

And the home page should look like:

Install React Router Plugin

npm install --save react-router-dom

Create two “Pages”

All SPA’s technically have just one real index.html file. But we’ll make .js files to give a multi-page feel.

In the src folder, make a folder named container.

Page1 files and content

Inside container folder, make a Page1 folder. And inside this folder, make Page1.js and Page1.css

This is the code for Page1’s content.

import React from "react";

export default function Page1() {
    return (
         <div className="page page1">
            <h1>Page One</h1>
         </div>
    )
}

Page2 files and content

Similar to Page1, create a Page2 folder inside container. And, make the Page2.js and Page2.css.

import React from "react";

export default function Page1() {
    return (
         <div className="page page2">
            <h1>Page Two!!!</h1>
         </div>
    )
}

Make the Router component

We finally got here! This is the ReactJS Router component that will define paths of the “page” or container components.

Create the router file in the src folder and name it AppRouter.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';

import Page1 from './containers/Page1/Page1';
import Page2 from './containers/Page2/Page2';

export default function AppRouter() {
    return (
        <Switch>
            <Route exact path='/' component={Page1}/>
            <Route exact path='/page2' component={Page2}/>
        </Switch>
    );
};

In the above code, we imported Switch and Route from the react-router-dom plugin.

Switch does the logic of which React Page component to show based on the path.

Route is used to configure which component is to which path. It also has the exact attribute built-in to make sure that if a user is on the home page path / it should show Page1. If the url on the browser is /page2, it should show Page2 component.

Add the BrowserRouter component

The BrowserRouter is a component from react-router-dom. This is really the component that kickstarts the app to have the SPA multi-page feel. Without this, the <AppRouter/> won’t work.

We include it in the index.js by using it as a wrapper around <App/>. Below is what the index.js file should look like:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, 
document.getElementById('root'));

serviceWorker.unregister();

Add AppRouter.js to App.js

To include the <AppRouter /> component that we just made, we import it and then add its instance inside the return statement.

import React from "react";
import './App.css';

import AppRouter from './AppRouter';
function App() {
    return (
        <div id="app" className="container">
            <AppRouter />
        </div>
    )
}
export default App;

By placing the <AppRouter /> inside <App />, we are defining the “page” components and their paths globally.

Let’s go to the pages!

On your browser, type in localhost:3000 if you’re not there yet. You should see the contents of Page1.js.

To go to page two, type in localhost:3000/page2, and you should see Page2.js‘s content.

Bonus: Add a navigation bar

A real SPA with a multi-page feel will have some sort of navigation bar for the site’s visitors. So instead of the visitors typing the url, they should be clicking from a navigation menu.

I’m going to call this component <HeaderBar />. It’s a re-usable kind of component in a sense that it doesn’t serve as a “container” or a “page” component. “Page” components or “containers” can be re-used depending on how they’re dynamically structured. But it’s beyond the topic of this article.

To get started:

1. In the src folder, create a components folder, if it doesn’t exist yet.
2. Create a HeaderBar folder inside that components folder.
3. Inside the HeaderBar folder, create a HeaderBar.js and a HeaderBar.css.

The HeaderBar.js should look like the code below.

import React from 'react';
import { NavLink } from 'react-router-dom';
import './HeaderBar.css';

export default function HeaderBar() {
    return (
        <nav role="main">
            <NavLink to='/'>Page1</NavLink>
            <NavLink to='/page2'>Page2</NavLink>
        </nav>
    );
};

Add the HeaderBar to the <App />

import React from "react";
import './App.css';

import AppRouter from './AppRouter';
import HeaderBar from './components/HeaderBar/HeaderBar';
import
function App() {
   return (
      <div id="app" className="container">
         <HeaderBar />
         <AppRouter />
      </div>
   )
}
export default App;

The homepage localhost:3000 should look like this with the HeaderBar component.

And if you click “Page2” in the navigation, the browser’s address bar should look like localhost:3000/page2 and the content of Page2.js should show up.