Intro to SPA

React SPA or Single Page Application is one of the selling points of using react.  The Single Page in this instance is the physical HTML page.   Within react, you can have one or multiple pages in your SPA.  Behind the scenes, the pages defined in React are basically setup just like react components with the jsx extension.  One of the main benefits of this setup is that as you initially do a get request to retrieve the page and the associated assets including JavaScript.  As the user accesses content that is defined as a different page in react, that update happens locally on the client.  Another way to state that React Router enables client-side routing.  So, no need to go refetch the HTML via a HTTP Get from the server which is a great benefit.

Intro to React Router

The engine behind having multiple pages and rendering those pages within react is the react router library.  The actual name of the library is react-router-dom. Without this library, you don’t get the SPA experience.  It facilitates the navigation between pages in react and rendering content based on the URL or path. To install react router into your project:   npm install react-router-dom.   In my examples below, I’m using react-router-dom version 6.21.2.  

Discover and Document Requirements

The discover and document stage is where you first gather what pages you will need for your React App.  Which page will serve as your landing page.  In my scenario, I’m going to build a site to sell designer shoes.   I will use the following pages:

• Landing Page
• About Page
• Contact Page
• Products Page

Initially, I’ll setup these pages and some links so I can quickly navigate between them.   My landing page will include links to the other pages.  Clicking a link will go to that page and each page will include a link to go back to the landing page.   First, I created a pages folder and all of my pages. It looks like:

For each file, can type in code snippet rafce to build an arrow function component with export.  Code snippets are available after installing the ES + 7 React/Reduc/React-Native snippets extension within VS Code. Each Page will look like the the following:

On the left is an example of the Landing page. On the right, an example of the About page. Wait, so a react page is basically a react component?   Yes, it’s setup just like a react component.  Your pages in react will contain your actual components defined as part of that page.   For Example, my landing page may have the navbar component, footer component, etc.. 

createBrowserRouter and RouterProvider

I’ll use three items from react router DOM to make this SPA possible.  createBrowserRouter, RouterProvider, and Link which I’ll write about in the next section. First with React Router Dom library, you’ll import createBrowserRouter and RouterProvider within App.jsx. createBrowserRouter is a function that accepts an array of objects.  Each object has built in properties to construct your site’s structure.  The first property is path which is the relative path which appears in the URL.  The second one I’ll use is element.  The element takes in either HTML source or a react component that’s setup as a page.  I assign the results of the createBrowserRouter() to a const called mypaths.  Finally, within the return of my App component, I’ll use the RouterProvider component and assign mypaths to the router property.  ReactDom will do the rest.  Here is how my App.jsx looks:

Note: I need to import my react pages in order to use them for each path.

Individual Pages Setup and using Link

I’ll start with my Landing.jsx page.   Each link I want to include, I’ll need to pass the Link component which is imported from react-router-dom.  Each Link includes a property called to which is where you specify the relative path to the page you want to access.  It’s similar to the anchor tag setup however it’s only used to direct a user to other pages within your site..  I added some styling as well so utilizing className of myStyle and mypad from hello.css.    Landing page looks like:

The About, Contact, and Products page will only include a heading and a Link going back to the landing page.   They all look pretty much the same and here is the about page:

Reviewing the Results

See Live Demo Site: Vite + React (myreactrouternotes1.netlify.app)

My landing page:

Clicking About:

Clicking Back Home takes me back home.  Notice the URL changes.   This is easy to setup and super important to understand the basics of react router and the role it plays within a react app. Future react router posts are coming where I’ll discuss nested pages, loader, and error pages. 

Code samples for the above project is available here:     ReactHelp/React Router/pt1 at main · RussMaxwell/ReactHelp (github.com)

React Router Getting Started Guide:  Tutorial v6.21.2 | React Router

Thank You,

Russ Maxwell