Setting Up Your Portfolio Website with React Router

Hi friends! I am beginning the journey of getting a website up to show my software engineering portfolio, and I have decided to build it with React.js. One of the easiest ways to implement a multi page web application with React is using React Router, and I am going to take you through the simple steps for getting that set up! For more information, check out the React Router documentation here.

What is React Router?

React Router is a simple way to add declarative navigational components to your application, creating bookmarkable URLs. Let’s say you’ve got <www.my-site.com> and you want <www.my-site.com/resume> to be a direct link to your very professional and updated resume. React Router can do that for you!

Initial Set Up

The first thing you need to do is get your React app set up.

npx create-react-app my-portfolio

Once that’s done, open the “my-portfolio” directory, and it’s time to install React Router.

npm install react-router-dom

And that’s it! Let’s get cracking and start implementing it into our application.

Import Necessary Components

Now, we’re going to set up basic routing inside the App.js file. Step 1: import the components you need from React Router at the top of the file.

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

We will be using each of these components when we set up the routing.

Enclose Everything in Router

Before we even get started, the first step is to wrap any and all React Router related code inside Router tags.

Add in Navigation with Corresponding Links

Next step is to add in your Navigation Bar, which I am going to put at the top of my page. This is where we are going to use the Link tags we imported.

For each separate page, add a separate Link tag (you can put this inside a button tag, a link tag, or whatever your heart desires. The “to” prop points to whatever URL you would like that particular Link to go to.

Adding in Switch

Switch is a necessary component because we only want to render one page at a time. I like how the documentation describes it:

A <Switch> looks through all its children <Route> elements and renders the first one whose path matches the current URL. Use a <Switch> any time you have multiple routes, but you want only one of them to render at a time.

We will add it right underneath the navigation bar that we just created (but inside the Router tags), like so:

Adding in Routes and Other Components

Next, inside the two Switch elements, we will start adding Route elements. We will add in as many Route elements as there are paths listed in the navigation bar you created above. Here’s what mine looks like:

The “path” prop points to whatever URL link you created above in the NavBar.

Last but not least, nested inside each of these Route elements is whatever code you want rendered at that particular path. I have created components in separate JS files, and imported them with the names Home, About, etc. You can also put this code in all the same page of course, but things start getting messy quickly.

Aaaaand that’s all folks! You’ve got a basic React Router set up. Now time to add code into those other pages and you’ll have yourself a nice portfolio. Happy coding!