Hi guys!
In this post, I will be giving a complete walkthrough on how to create a React App with the help of React Router Dom.
React Router v6 is mainly used for developing Single Page Web Applications.
Check out my React Router 6 article.
In this example we will be creating a simple react app which will have multiple pages, but still be a single page application. The major advantage of react router is that the page does not have to be refreshed when a link to another page is clicked, for example.
In this example we will be creating a simple 4 page application with minimal content but instead, the focus will be on Routing and its importance.
Step 1
First of all, create a new react application (not necessary but recommended to follow along).
npx create-react-app my-app
After creating, your project directory should look like this:
To run the app, use the command:
npm start
Make sure to cd into the app folder first!
A video that shows how to create a React App
Step 2
Delete all files from the src folder except for inde.js and app.js(not necessary but recommended)
Step 3
Next, edit your app.js to look like this :
function App() {
return (
<div className="App">
</div>
);
}
export default App;
Then edit your index.js to look like this:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Step 4
We are ready to start now!.
Now, create a new folder in src called Components.
Within this folder, create 3 files:
- page1.js
- page2.js
- page3.js
It may look like this :
Step 5
Install react router v6
npm add react-router-dom@6
Make sure to cd into the app folder first!
then import react router dom and some other components in app.js, that will be used later.
import { BrowserRouter as Router, Route ,Link, Routes} from "react-router-dom";
Step 6
Now we will create the 3 pages that will be used.
All 3 will have same code with the exception of the headings.
page1.js
import React from 'react'
export default function Page1() {
return (
<div>
<h1>Page 1</h1>
</div>
)
}
page2.js
import React from 'react'
export default function Page2() {
return (
<div>
<h1>Page 2</h1>
</div>
)
}
page3.js
import React from 'react'
export default function Page3() {
return (
<div>
<h1>Page 3</h1>
</div>
)
}
Right now there is no way to open these pages from the browser. That's where react router dom comes into play.
Step 7
Now we have to import the 3 pages into the app.js
page.
import Page1 from"./Components/page1"
import Page2 from"./Components/page2"
import Page3 from"./Components/page3"
Note!: Component names should start with upper case letter
Step 8
Inside app.js add the following code inside the <div className="App"></div>
<Router>
<Routes>
</Routes>
</Router>
Note!: Switch has been replaced by Routes in React Router V6
Step 9
Inside the
Routes
, we will add 4Routes
, 3 for the pages and one for the home page.
Each route will contain the path of one of the pages.
<Router>
<Routes>
<Route exact path="/" element={<h1>Home Page</h1>} />
<Route exact path="page1" element={<Page1 />} />
<Route exact path="page2" element={<Page2 />} />
<Route exact path="page3" element={<Page3 />} />
</Routes>
</Router>
Step 10
Right now the app.js page on the browser is empty, but the routing is working. If you got to the URL and type, for example localhost:3000/page1
, it will open page 1.
Now we will add the clickable links in the app.js page.
For this we will use the Link
component we imported earlier.
Add the following code after the </Routes>
tag. (But within the Router)
<div className="list">
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="page1">Page 1</Link></li>
<li><Link to="page2">Page 2</Link></li>
<li><Link to="page3">Page 3</Link></li>
</ul>
</div>
Your App.js page will be looking like this now.
import { BrowserRouter as Router, Route, Link, Routes } from "react-router-dom";
//Import the pages
import Page1 from "./Components/page1"
import Page2 from "./Components/page2"
import Page3 from "./Components/page3"
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route exact path="/" element={<h1>Home Page</h1>} />
<Route exact path="page1" element={<Page1 />} />
<Route exact path="page2" element={<Page2 />} />
<Route exact path="page3" element={<Page3 />} />
</Routes>
<div className="list">
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="page1">Page 1</Link></li>
<li><Link to="page2">Page 2</Link></li>
<li><Link to="page3">Page 3</Link></li>
</ul>
</div>
</Router>
</div>
);
}
export default App;
Now everything is working and the pages open when you click on the Links without refreshing the page ie content is being fetched without reload.
CSS - the icing on the cake
Now to make it look better.
Create a new file in the src folder called app.css.
Add the following code.
* {
padding: 0;
margin: 0;
}
h1 {
text-align: center;
font-size: 45px;
font-family: Arial, Helvetica, sans-serif;
color: rgb(6, 0, 32);
padding: 40px;
}
.list {
display: flex;
justify-content: center;
width: 100%;
}
.list ul li {
list-style: none;
margin: 42px;
text-align: center;
}
a {
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
padding: 14px 25px;
background-color: transparent;
border: 2px solid rgb(12, 0, 66);
}
a:hover {
background-color: rgb(12, 0, 66);
color: rgb(255, 255, 255);
}
Now import it into app.js
//import css
import "./app.css"
This is what your page will look like:
Code is also on github
And were' done!,
Thank you so much for all the support. I hope you all learned something new and enjoyed this tutorial.
Until next time,
Cheers :)
Top comments (11)
In v6 Switch doesn't working.
Hi
Yes in v6 switch has been replaced by
Routes
That is why I am not using switch in this tutorial.
how to get macth,history,location in v6
Switch replaced by Routes
The tutorial has been updated to include new features in React Router 6
Hmmm good point
I am always messing up :)
Actually i wrote this tutorial a week back.
Will update it soon
Great walk through! One comment though, technically since this is not jumping to hashlinks and rendering completely different views this would be a multi-page application, not a SPA correct?
Yes it is an application with multiple pages, but since you do not reload the page when navigating to other pages (only the url changes) you are essentially on the same page all the time. So a single page with dynamic content.
Ah thank you, professionally I've only worked on MVC/ Multi-Page applications so in my free time I was trying to wrap my head around the SPA architecture and how they are different. I'm implementing this in a pet project and really appreciate the details and time you put into this!
Thanks a lot!
How to Set Up Router and Route to Other Components . Bring my lover back to me
Some comments have been hidden by the post's author - find out more