Saleh Mubashar
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)
It should look like this:
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 :)
