Learn React Router Version 6 for Beginners

Published by Pawan Sargar on

React Router version 6 tutorial

React Router recently got updated to version 6 and has bought some new features and it’s now way cleaner than version 5.

Don’t know what React Router is? well,

React Router or React Router DOM is a React library for adding dynamic routing in React-based Applications. With the help of this library, you can use your simple and beautiful component as a new page. Of course, it’s not a different HTML page, it’s just another React component, and that’s what is going to make your application a lot faster.

This library is fully equipped with features, but today in this tutorial we will learn the basic React Routing to get you started with React Router.

So, without any further ado, let’s get inside our code editor.

#1 Create a new React App –

If you’ve already created a new React App feel free to skip to step no. 2 and if you haven’t yet let’s create it together.

npm create-react-app my-app

#or

yarn create react-app my-app

After installation is completed make sure to start your React App, by using the below command,

npm start

#or

yarn start

For your reference, below will be the folder and file structure for this project.

  • public
    • index.html
  • src
    • App.js
    • index.js
    • styles.css
    • components
      • Navbar.jsx
      • Home.jsx
      • Services.jsx
      • Contact.jsx
      • About.jsx

#2 Install react-router-dom Library –

To actually use the Router we’ll first need to install the React Router DOM library, let’s do it.

npm install [email protected]

#or

yarn add [email protected]

Just to make sure we install the newest version of React Router library, we’ll append “@6” while installing React Router DOM.

#3 Setting up BrowserRouter –

Now as we’ve installed the library, let’s use it in action. Inside the index.js, add import the BrowserRouter from React Router DOM library and wrap App.js component inside it, just like the below code.

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

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  rootElement
);

BrowserRouter is the parent component that will store all the components that we add inside the App.js component. It’s totally fine to use BrowserRouter inside the App.js, but to avoid any further errors it’s a better practice to add it in index.js.

Also check out:-
React Carousel Slider Tutorial

#4 Routing the Components –

Now, inside App.js, import all the components that you want to use routing with. It doesn’t matter if you are using that component in the App component or not, if you want to add routing to a particular component it should go inside the <Routes></Routes>.

If there’s any component that you don’t want to add routing, but need to use for accessing the Route components, then add it outside the <Routes></Routes> tag. The best example would be the Navbar which we are creating.

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

import About from "./components/About";
import Contact from "./components/Contact";
import Home from "./components/Home";
import Navbar from "./components/Navbar";
import Services from "./components/Services";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/services" element={<Services />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

Use, <Route />to set the address of the particular element. You can set the desired path and element as the attribute.

#5 Creating Navbar Component –

We’ve done with setting up the React Router. Now, we just need to use it in action but before that, we need to set up our Navbar.jsx component.

import React from "react";
import { Link } from "react-router-dom";

const Navbar = () => {
  return (
    <nav>
      <ul className="nav-items">
        <li>
          <Link to="/">Home</Link>{" "}
        </li>
        <li>
          <Link to="services">Services</Link>
        </li>
        <li>
          <Link to="contact">Contact</Link>
        </li>
        <li>
          <Link to="About">About</Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navbar;

Now, the only thing you need to do is import Link from React Router Dom and use it just as you use HTML Anchor tag, instead of href="" use to="". Make sure that the address is exactly what we enter in App.js.

And, that’s it, that’s how easy it is to add the Routing functionality to the React App. There’s much more that we can do, like Dynamic Routing, Route Chaining, etc. Let us know what you want to learn.

Final Result –

I hope this post was helpful if it was make sure to follow our Coding Master newsletter.

Pawan Sargar
Follow him
Spread the love
```html ```

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published.