React Router Dom v6

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:

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

npx create-react-app my-app

If you want, you can follow along this tutorial in Codesandbox

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

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.

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.

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

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/

npm start

Our app renders all page components at the same time.

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.

npm install react-router-dom@6

This will add react router to our dependencies in package 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.

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.

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.

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.

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:

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.

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. 🎉

In the Youtube 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

Comments

[Andrew Baisden]

Good crash course! The new element tag was the biggest change for me because I was used to the previous syntax. I could not figure out why the routing was not working 😅 I still have the v5 router codebase in some older projects.

[Coding Jitsu]

I love that we don't have to use exact any more lol!