React Router Dom v6
Tags: javascript, react, webdev, beginners
Published: 2022-05-20 20:38:33

React Router Dom v6 has some changes from its previous versions and they are really good.

React router is a client-side routing for react application. It is very easy to understand and use. It is also by far the most popular among react developers.

> If you prefer a video tutorial then check out this: 
{% youtube g1aFLxYO1O8%}  

So, lets get started with CRA. In you terminal paste the below code.

```c
npx create-react-app my-app
```

> If you want, you can follow along this tutorial in [Codesandbox](https://codesandbox.io/)

For this tutorial, I am going to get rid of all of the unnecessary files. Your react app tree structure should look this.

![code file tree structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/041y29799e1gjqp34k6l.png)

Ok, So now we are going to create two folders in the src folder.

- pages -> This folder will hold all our page components,
- components -> This folder will hold all our reusable components.

So, Now our folder structure looks like this.
![file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cig3x9j99rp2dwwcg4ac.png)

Each `js` file in our `pages ` folder represents a page component.
Right now, this page components are only returning the name of the page and that's it. 

![about page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56anlxm6hwvived8nw0o.png)

Let's go ahead an import all the pages in our `App` component.

```c
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import Services from "./pages/Services";
import Profile from "./pages/Profile";

const App = () => {
  return (
    <>
      <Home />
      <About />
      <Contact />
      <Services />
      <Profile />
    </>
  );
};

export default App;
```
Lets start our app. In the terminal we are going to write the bellow script which will start our app at `http://localhost:3000/`

```c
npm start
```
Our app renders all page components at the same time.

![react app in the localhos:3000](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vi0ogeh0c1ozjuss0uwh.png)
 
This is not what we want. We want homepage that is on `/` path to render only the home page, and if we navigate to a path `/about` we should see the about page and nothing else.

React Router Dom solves this issue and gives us proper client-side routing.

Let's install React Router Dom to our project.

```c
npm install react-router-dom@6
```
This will add react router to our dependencies in package json.

```json
{
  "name": "react-router-dom-crash-course",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
```

Let's go ahead and use it in our project. In the `index.js` file we will import `BrowserRouter` from `react-router-dom`. We will wrap our `App` component with `BrowserRouter`. This will give access to `react-router-dom` to our whole project.

```c
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);
```
Next, we are going to go to our `App` component. Here we are going to import two things from `react-router-dom`. One is `Routes` and the other is `Route`. Idea is `Routes` will wrap all our single `Route`. We will start with just one component. 

```c
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import Services from "./pages/Services";
import Profile from "./pages/Profile";

import { Routes, Route } from "react-router-dom";

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </>
  );
};

export default App;

```
You can see from the above example, `Route` takes two attributes. One is `path` which will be equal to the URL location path we want our page to show and two is the `element` which equal to the page component. So, since we want our Home page to show on the first page, we will give the path `/` and the element `<Home />`.

I am going to create `Route` for all the other pages.

```c
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import Services from "./pages/Services";
import Profile from "./pages/Profile";

import { Routes, Route } from "react-router-dom";

const App = () => {
  return (
    <>
      <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
          <Route path="services" element={<Services />} />
          <Route path="services" element={<Profile />} />
      </Routes>
    </>
  );
};

export default App;
```

if you go to the `/about` path you will only see the `About` page component renders. Great progress!

Now, We surely don't want our users to change the URL path to navigate to a different page, do we?
So, let's create a very simple nav in our `components` folder. We will create a file called Nav.js in the `components` folder.

```c
const Nav = () => {
  return (
    <>
      <ul>
        <li>Home</li>        
        <li>About</li>     
        <li>Contact</li>      
        <li>Services</li>
        <li>Profile</li> 
      </ul>
    </>
  );
};

export default Nav;
```

We are going to give this nav a little style:

```css
ul {
  list-style: none;
  width: 100%;
}

ul li {
  display: inline;
  margin: 50px;
}
```

Alright! Now, we have to add the individual nav item to the appropriate path. So for nav item `home`, it should direct the user to the path `/`. To do this React Router has its own anchor tag called `Link`. `Link` will take one attribute `to` which will specify which path to follow. You can think of this `to` as `href` in `a` tag. So our Nav.js file should look like this.

```c
import { Link } from "react-router-dom";
const Nav = () => {
  return (
    <>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
        <li>
          <Link to="/services">Services</Link>
        </li>
        <li>
          <Link to="/profile">Profile</Link>
        </li>
      </ul>
    </>
  );
};

export default Nav;

``` 

Now, if you look back at your application, you have a working Nav bar that has the page to page routing, thanks to React Router Dom. :tada:

In the [Youtube ](https://www.youtube.com/watch?v=g1aFLxYO1O8&t=922s&ab_channel=CodingJitsu)video I did talk about two more features that comes with React Router Dom version 6, which are:

- Nested Routes &
- 404 page not found Route

Check the video out at this link: https://www.youtube.com/watch?v=g1aFLxYO1O8&t=922s&ab_channel=CodingJitsu