Creating Single Page Application With React
You have to follow the steps below for building a react single page application;

Use your desired location to create the react app with the command below;
npx create-react-app app-name
App-name directory to be built in the following default files:

app-name
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js
Execute the following command to install react-router-dom:
npm install react-router-dom
Wrapping The App Component
React Router has 2 types of routers: BrowserRouter and HashRouter. We’re using BrowserRouter in this example because it makes the URL’s look like example.com/about rather than example.com/#/about. React Router uses a hash (hash) at the end of the URL to determine what page to load.

You must include the code below in your src.index.js:

import React from "react"
import { render } from "react-dom"
import { BrowserRouter } from "react-router-dom"
import App from "./App"
render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.querySelector("#root")
)
The following code should be used to create a file named src/pages/HomePage.js:
import React from "react";
export default function HomePage() {
return (
<>
<h1>Hey from HomePage</h1>
<p>This is your awesome HomePage subtitle</p>
</>
);
}
The following code should be used to create a file named src/pages/UserPage.js.
import React from "react";
import { useParams } from "react-router-dom";
export default function UserPage() {
let { id } = useParams();
return (
<>
<h1>Hello there user {id}</h1>
<p>This is your awesome User Profile page</p>
</>
);
}
Route and switch group all routes together to make sure that they take precedence over each other.
The following routes should be there in your App.js file:

import React from "react"
import { Route, Switch } from "react-router-dom"
// We will create these two pages in a moment
import HomePage from "./pages/HomePage"
import UserPage from "./pages/UserPage"
export default function App() {
return (
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/:id" component={UserPage} />
</Switch>
)
}
You can link to a page inside the SPA.
import React from "react"
import { Link } from "react-router-dom"
export default function HomePage() {
return (
<div className="container">
<h1>Home </h1>
<p>
<Link to="/your desired link">Your desired link.</Link>
</p>
</div>
)
}