How I Change The React JS Portfolio From a Single-Page App to a Multi-Page App

Hello, I’m Shahab, and I’m excited to guide you through a step-by-step process of adding React Router DOM version six to your project. Let’s dive right in!

I’ve got my GitHub open, and my project is already there. If you want to follow along, feel free to do so.

Once you’re on my GitHub page, locate the repository called “portfolio app react.” Simply click the “Code” dropdown button and find the GitHub CLI command. Copy that command for later use.

Now, let’s head to our code editor. I’ll open my terminal by pressing the control-backtick button. You can use your terminal to feel like a true programmer. Let’s change the directory to our desktop with the command “cd Desktop.” After that, we can paste the GitHub CLI command we copied earlier. This will clone our project.

With the repository successfully cloned, let’s change the directory once more to “portfolio app react.” This step is quick and simple.

I want to show you how to set up React Router DOM version six for my project. I have my project on GitHub, so let’s start by cloning it. Follow along step by step if you want to do this with me.

  1. Go to github.com and search for my username, which is “fireclint.” It’s called “portfolio app react,” I believe. Look in the repositories, and you’ll find it.
  2. Click the “Code” dropdown button and copy the GitHub CLI command.

Now, open Visual Studio Code (VS Code), and let’s proceed. We’ll start by changing the directory to my desktop:

cd ~/Desktop

We use these two ampersands (&&) to ensure that if changing the directory to the desktop is successful, the next command will execute. Now, paste the GitHub repo clone command:

gh repo clone <repository_url>

Once the repository is cloned successfully, let’s change the directory once more to the cloned repository:

cd portfolio-app-react

Now, we need to install all the necessary dependencies:

yarn

I built this project using Yarn, so this command will install all the dependencies for us.

Next, let’s start our development server:

yarn start

While it’s loading, let’s search for React Router DOM. I’m looking for version six, so I’ll navigate to reactrouter.com and find the documentation for version six.

Now, let’s integrate React Router DOM into our project. In the src folder, open the index.js file. Remove the react.strict mode and add the BrowserRouter wrapper:

import { BrowserRouter } from 'react-router-dom';

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

We’ve wrapped our entire application with BrowserRouter. Now, let’s define our routes. Import Routes and Route from react-router-dom:

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

Now, let’s structure our routes. Anything outside of the Routes tag will be displayed on every page, like our navigation bar. Inside the Routes, we’ll define individual routes:

<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/skills" element={<Skills />} />
<Route path="/work" element={<Work />} />
<Route path="/contact" element={<Contact />} />
</Routes>

These paths should match the URLs you want for your pages.

To update the navigation links, change them in your NavBar component:

<a href="/">Home</a>
<a href="/about">About</a>
<a href="/skills">Skills</a>
<a href="/work">Work</a>
<a href="/contact">Contact</a>

Make sure the URLs in the href attributes match the route paths you defined earlier.

Now, when you click on the links, you’ll navigate to the corresponding pages. Your React application is now a multi-page app.

That’s it! You’ve successfully converted your single-page application into a multi-page one using React Router DOM version six. Stay tuned for more articles on React coming soon.