Getting friendly with React Router: a super-friendly beginner’s guide
For one reason or another, I found it infuriatingly difficult to find a simple guide to React Router and how to implement it in my apps.
I found myself endlessly searching through increasingly confusing guides and ended up more confused than before I started the research.
When I finally did figure it out, I realised that it’s not really difficult at all. It looks big and scary, but it’s a lot more simple than I thought and I want this guide to reflect that.
Alas! This friendly guide will allow you to skip the tantrums and the ugly-faced crying so you can get straight to grips with React Router.
What is React Router anyway?
At a basic level, React Router allows you to have multiple pages in your React app.
It is still a single-page application and so when you navigate between pages, there is no page refresh to fetch information from the server.
Instead, all of the HTML and JavaScript is loaded when the app is first loaded. All the subsequent changes you see, when using React Router in an app, are done with JavaScript.
Why use React Router though?
As there is no page refresh and fetching of information from the server when navigating between pages, this gives a more fluid and seamless experience for the user.
Ok, I get it. Now show me what it’s all about…
To help us get straight to the relevant stuff, you can simply clone this repository.
This is basically a create-react-app with all the unnecessary stuff removed, so we have a clean boilerplate to practice using React Router.
Simply click on Code and then copy the HTTPS url.
*If you prefer to not use the terminal, then I recommend just downloading the repository with Download ZIP and opening it in your IDE of choice (I am using VS Code) and skipping the ‘Using the terminal’ step. If you want to get friendly with the terminal, see the first article in this series: Getting friendly with the terminal: a super-friendly beginner’s guide.
Using the terminal: Navigate to any terminal (I use the terminal in VS Code). Make sure you are in the relevant folder and then type git clone https://github.com/wymersam/react-router-practice.git (this is the url that you copied from the GitHub repository.
Open this repository in your IDE. You should see the following folder structure:
Great! Now we can starting sinking our teeth into React Router.
First of all, you need go to your IDE terminal and install react-router-dom with the command:
npm i react-router-dom
The next step is to create the pages that we want for our app/website. Create a folder in the src folder and name it pages. In this folder, create four .js files and name them:
About.jsError.jsHome.jsNavbar.js
Your folder structure should now look as follows:
For each of these components, you should export the function and add a <h1> title just so we can check if everything is working later on. For example:
Nice! Now, we need to navigate to App.js and import the following three things:
BrowserRouterRoutesRoute
BrowserRouter connects our application to the browser.
The Routes component will be the parent for all our routes (basically the paths to all our pages). Think of it as a
<div>that wraps all our Route components.And the Route component is what we use to set up a single route (an individual path to a page).
After this, we need to import the pages we just created. See the import statements at the top of the App.js files in the screenshot a few lines below if you are unsure how to do this.
After we have imported all the relevant components, we then come to the meat of the matter.
In the App function code, you can delete the <h1> title and add the following code:
So, what is going on here then?
As mentioned above, BrowserRouter connects the app to the browser and the Routes component wraps all the individual Route components.
The first Route in the screenshot above is the Home page. The path to the homepage is always / so, no matter the name of your homepage, you should have / as the path.
The other routes will have a different path to the homepage. These will be a little more intuitive as you can see from the screenshot above. For example, if I wanted to add a Contact page the code would be:
<Route path="contact" element={<Contact />} />
*(I would also have to create and import the Contact.js page first)
The Error page path is also special. The * basically means that if you manage to navigate to a path that doesn’t exist in this application then you will be directed to the Error page. For example:
In the screenshot above you can see that the app is running on localhost:3000
In this screenshot, you can see that the url for the About page follows the path given in the code. For example, if we changed this path to about-page then the corresponding url would be localhost:3000/about-page
And in this screenshot, you can see that I was trying to navigate to the About page but I mistyped about. In our application, there is no path for aboutt and so we are taken to the Error page thanks to the * in the path.
This * basically says “for all other paths that don’t exist in this application, take me to the Error page.
The element is also quite intuitive and is where you put the link to the page/component.
Pretty simple so far, right?
Well then you’ll be happy to know that the hard part is basically done.
So, now you have all the pages linked and you can test them out by running your application. Just type the following in the terminal:
npm start
You should see a screen with Home as the title and nothing else. At this stage there are no buttons to navigate from page to page and so you will have to test this manually via the url. See the above screenshots for help with this.
Now we come to the Navbar component.
You might have noticed earlier that I hadn’t imported the Navbar component as a Route in the App.js file. The reason for this is because I want to use the Navbar component a little bit differently to the other pages.
I don’t want it to be a separate page, I want it to appear on every page.
First, let’s navigate to our Navbar.js file. If you like, you can first try and create your own navbar and then continue through this guide. I don’t want to waste time and words so I’m just going to share my navbar code below.
I purposely haven’t shared a link to the code here as I think it is much more beneficial for you to type it out:
So, what’s going on here?
The first thing you might notice is this Link component and think, “what is this and why do I need it? smh”.
But don’t despair. It is basically the React Router version of the
<a>tag.
When using React Router, we need to use the Link component when we are linking to a different URL in our application, but we use the <a> tag for external URLs. Not too complicated really, right?
And don’t worry about the Contact page. We’re going to create that later.
Once we have created our Navbar component, we need to navigate back to the App.js file and import it.
As you can see in the screenshot above, I have imported the Navbar component and have added it below the BrowserRouter component but outside of the Routes component.
“But why have you done this??! Where is the path? What about the element? Why is it not a Route? Explain yourself!”
All very good questions by the way.
Because we don’t want to use the Navbar as a page of its own, we don’t need to create a Route for it.
All we are doing here is adding the Navbar component to the top of all the pages that have a Route in the BrowserRouter component. Just like we would add any typical React component.
By including the component here, it saves us from importing it to each individual page and this makes for cleaner code.
Because the Navbar is not actually a page and is actually a component, it is good practice here to refactor our code. Don’t worry, this is a micro change.
Navigate back to your IDE and create another folder in the src folder and name it components. Drag and drop the Navbar.js file from the pages folder to this newly created components folder. Click Move and then Yes to updating the imports.
When we navigate back to the app we should see the Navbar on all pages:
Now, I’m going to hand over the reins to you.
You can see that we have a link to aContact page in our Navbar but we don’t yet have a page for this. Now it’s your turn to create this page and import it to the App.js file as a Route.
The screenshots below will help if you are unsure of how to do this:
Awesome! Now the Navbar should be working fine and you will be able to navigate between pages.
I added some CSS to make my Navbar prettier. Feel free to do the same or use my CSS code.
So that is React Router!
Now you have your own boilerplate, I recommend adding some more components and CSS to make your own profile or portfolio. You can even practice adding more pages and links.
I hope you found this article useful and if you want to ‘Get friendly’ with more tech topics, you can check out the other articles in this series:
Getting friendly with the terminal: a super-friendly beginner’s guide
Getting friendly with git: a super-friendly beginner’s guide
Keep challenging yourself and remember, being uncomfortable means you are growing.
