DEV Community

Cover image for Understanding React Routing Using React Router
Ian Kamau
Ian Kamau

Posted on

Understanding React Routing Using React Router

React Router: React Router is a library for handling navigation in a React application. It enables the navigation of different components in a React application, making it possible to create a Single Page Application (SPA) where the page doesn't reload when navigating between different views.

Exploring Page Navigation with React Router: A Practical Guide

In this blog post, I'll guide you through the process of seamlessly navigating between pages using React Router.

Getting Started: Setting up a React Application with Vite JS

To begin your journey, let's create a new React application using Vite JS. Open your terminal and enter the following command:

npm create vite@latest
Enter fullscreen mode Exit fullscreen mode

You will be prompted to choose a few things, make sure that you choose react and javascript.

Image description

The React Router Experience

Once your React application is up and running, we'll dive into the world of React Router. Learn how to efficiently move between pages, enhancing the user experience of your application.

Ready to embark on this journey? Let's get started!

After the project has been created, install the dependencies and open it on the vs code or the code editor of your choice.

cd react-navigation
npm install
code .
Enter fullscreen mode Exit fullscreen mode

When the project is opened on your code editor, install react-router using the following command

npm install react-router-dom
Enter fullscreen mode Exit fullscreen mode

When its completed, navigate to App.jsx and write the code in this image.

App.jsx image

Here we are importing Link from react-router-dom. Link is similar to an a tag and is used in navigation.
Then open the src directory and create a folder and name it as pages.

Inside src/pages create a file name it About.jsx and write the code in this image.

About.jsx image

Navigate to main.jsx. This is where we will set up our navigation.
To start, we will have to

  1. import About from ./pages/About.jsx. 
import About from "./pages/About.jsx";
Enter fullscreen mode Exit fullscreen mode
  1. import createBrowserRouter and RouterProvider from react-router-dom. 
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import About from "./pages/About.jsx";
Enter fullscreen mode Exit fullscreen mode
  1. Create our router 
const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/about",
    element: <About />,
  },
]);
Enter fullscreen mode Exit fullscreen mode

We use createBrowserRouter to create our routes which accepts an array of objects each having a path and an element

  1. Replace <App /> inside the <React.StrictMode></React.StrictMode> with RouterProvider and placing the router inside it. 
<React.StrictMode>
    <RouterProvider router={router} />
</React.StrictMode>
Enter fullscreen mode Exit fullscreen mode

Main.jsx image

Top comments (1)

Collapse
 
vansh_tyagi profile image
Vansh Tyagi •

Very nicely and easily explained, but if you put the work of here it will be a full tutorial. Thanks.