5 Easy Steps to Configure Routes in React JS

Have you ever wondered how to Configure Routes in React JS in Just 5 Steps?

Curious about how to enhance your React single-page application with seamless navigation? Understanding React JS routing is crucial for delivering a dynamic and engaging user experience.

In this guide, we'll explore the essentials of setting up a React router and configuring routes in React JS to optimize your application's performance. Whether you're new to React or looking to refine your skills, this introduction will provide the insights you need to master React navigation.

How to Configure Routes in React JS

Step 1. Install the required npm packages by pasting this npm command in your terminal

npm install react-router-dom

Step 2. Then go to your app.jsx file of your react app then import the variable name createBrowserRouter and RouterProvider from the react-router-dom

import { createBrowserRouter, RouterProvider } from 'react-router-dom'

Step 3. Define a Variable name that contains the routes information then call the createBrowserRouter that take array of object as input.

import React from 'react'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
const Routes = createBrowserRouter([{
},

Step 4. After that, you need to add keys and values to the object. The first key is path, and its value is the route of your application. The second key is element, and its value is the element you want to show on that route. To do this, you need to import the screen or component you want to display.

import React from 'react'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Home from './screens/Home'
import MentorFind from './screens/MentorFind'
import MyMentors from './screens/MyMentors'
import Resources from './screens/Resources'
import Navbar from './Components/Navigation'

const Routes = createBrowserRouter([{
  path: "/",
  element: <div>
    <Home />
    <Navbar />
  </div>
},
{
  path: "/mentors",
  element: <div>
    <Navbar />
    <MentorFind />
  </div>
},
{
  path: "/mentor",
  element: <div>
    <Navbar />
    <MyMentors />
  </div>
},
{
  path: "/resources",
  element: <div>
    <Navbar />
    <Resources />
  </div>
},
])

function App() {
  return (
<div>Hello Aditya</div>
  )
}

export default App

Note: If you want to show multiple components in the routes, you need to wrap them in a div. For example, I did this with the Navbar because I want it to appear on every screen.

Step 5. In the last step, you need to use RouterProvider and pass the routes you created as a prop.

function App() {
  return (
    <RouterProvider router={Routes}></RouterProvider>
  )

• 5 Step process to setup server in Node Js

Conclusion

Setting up routes in React JS is a crucial step in building a single-page application that provides a seamless user experience. By following the steps outlined, you can effectively manage navigation within your app using react-router-dom.

This involves installing necessary packages, defining routes, and using components like createBrowserRouter and RouterProvider to render the appropriate elements based on the application's path.

With these tools, you can create a dynamic and responsive application that enhances user interaction and accessibility.