# 5-Step Guide to Setup React Router Link in React

Is Your App Missing Out on the Advantages of React Router Link?

In today's digital age, making sure your web app is easy to use is more important than ever. If you're building with React, you might be wondering if you're getting the most out of **React Router Link**.

This handy tool can really improve how users move around your app, making it smoother and more user-friendly. By using React Router Link, you can give your users a better experience with seamless navigation.

In this post, we'll discuss how React Router Link can improve your app's navigation and why it's a must-have for any React project. Don't let your app miss out on these benefits—learn how to use it well to make your app even better for your users.

## How React Router Link Simplifies Route Configuration in React JS

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

```javascript
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

```javascript
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.

```javascript
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.

```javascript
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.

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

* [5 Step process to setup server in Node Js](https://blog.adityaguptareal.com/setting-server-in-nodejs)
    

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