Create a React App with React Router Dom v6
Tags: react, javascript, webdev, programming
Published: 2021-11-04 15:59:59

![Header Img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6noxwwpu8iwxdbzh9ygb.jpg)

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.](https://dev.to/salehmubashar/react-router-v6-whats-new-5e3c)

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](https://saleh.hashnode.dev/)

-----------------------------------------------------------------
##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:

![Directory Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aklvh0q8v54a4dwl6jf3.JPG)

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
{% youtube zLiMsF0UlpI %}

##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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v38befe21071wtryj382.png)

##Step 3

Next, edit your **app.js** to look like this :
```javascript
function App() {
  return (
    <div className="App">
    
    </div>
  );
}

export default App;
```
Then edit your **index.js** to look like this:
```javascript
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 :

![Components folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w883g451bbfj8newnqvj.png)

##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.
```javascript
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
```javascript
import React from 'react'

export default function Page1() {
    return (
        <div>
            <h1>Page 1</h1>
        </div>
    )
}
```
#####page2.js
```javascript
import React from 'react'

export default function Page2() {
    return (
        <div>
            <h1>Page 2</h1>
        </div>
    )
}
```
#####page3.js
```javascript
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.
```javascript
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>`
```javascript
<Router>
  <Routes>
  </Routes>
</Router>
```
>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.
```javascript
<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**.

![Page 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ljur7g39kjmcple0py5.png)


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

```javascript
<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.


```javascript
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.

```css
* {
    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
```javascript
//import css
import "./app.css"
```

This is what your page will look like:

![Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1lug82mb32zi87vxcb8a.gif)

>Code is also on [github](https://github.com/Saleh-Mubashar/React_Router_Dom_App)

-----------------------------------------------------------------

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 :)