DEV Community 👩‍💻👨‍💻

Saleh Mubashar
Saleh Mubashar

Posted on • Updated on

Create a React App with React Router Dom v6

Header Img

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.

Check out my Blog too


Step 1

First of all, create a new react application (not necessary but recommended to follow along).

npx create-react-app my-app
Enter fullscreen mode Exit fullscreen mode

After creating, your project directory should look like this:

Directory Example

To run the app, use the command:

npm start
Enter fullscreen mode Exit fullscreen mode

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:
Src folder

Step 3

Next, edit your app.js to look like this :

function App() {
  return (
    <div className="App">

    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

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')
);

Enter fullscreen mode Exit fullscreen mode

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 :

Components folder

Step 5

Install react router v6

npm add react-router-dom@6
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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>
    )
}
Enter fullscreen mode Exit fullscreen mode
page2.js
import React from 'react'

export default function Page2() {
    return (
        <div>
            <h1>Page 2</h1>
        </div>
    )
}
Enter fullscreen mode Exit fullscreen mode
page3.js
import React from 'react'

export default function Page3() {
    return (
        <div>
            <h1>Page 3</h1>
        </div>
    )
}
Enter fullscreen mode Exit fullscreen mode

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" 
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Note!: Switch has been replaced by Routes in React Router V6

Step 9

Inside the Routes, we will add 4 Routes, 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>
Enter fullscreen mode Exit fullscreen mode

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.

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>
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

Now import it into app.js

//import css
import "./app.css"
Enter fullscreen mode Exit fullscreen mode

This is what your page will look like:

Result

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 (9)

Collapse
 
edhovhannis profile image
EdHovhannis

In v6 Switch doesn't working.

Collapse
 
salehmubashar profile image
Saleh Mubashar Author

Hi
Yes in v6 switch has been replaced by
Routes
That is why I am not using switch in this tutorial.

Collapse
 
lukeshiru profile image
Luke Shiru

You might have to update the guide, yesterday React Router 6 was released, and it handles stuff a little bit different: reactrouter.com/docs/en/v6/getting...

Collapse
 
salehmubashar profile image
Saleh Mubashar Author

Hmmm good point
I am always messing up :)
Actually i wrote this tutorial a week back.
Will update it soon

Collapse
 
torik17 profile image
Tori

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?

Collapse
 
salehmubashar profile image
Saleh Mubashar Author

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.

Collapse
 
torik17 profile image
Tori • Edited on

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!

Thread Thread
 
salehmubashar profile image
Saleh Mubashar Author

Thanks a lot!

Collapse
 
salehmubashar profile image
Saleh Mubashar Author

The tutorial has been updated to include new features in React Router 6

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!