IDK - React Router V6.4+ Basics
Tags: webdev, codenewbie, beginners, react
Published: 2023-01-10 18:32:09

I recently decided to finish an unfinished project that began working on a few months ago. Hold on! don’t judge me…. we’ve all done it, but this time I’m going to complete it 👀.  Anyway, back to my point, I realized the routing was not working properly and could not figure out what the problem was. I must’ve missed the notice about **React Router V6.4+** update (it’s at 6.6 now, I believe). No biggie! I went through the process of re-routing my router and let me tell you…. I kind of like it. It is not like I didn’t like the previous version, but something about the new way of initializing the router now just seems more aesthetically pleasing. We all love nice aesthetics.

The main changes in this update were mostly with data fetching in React and to really utilize the features we must adjust how our routes are defined.

If you missed the update memo too, don’t worry I got you. I can show you what I did to update the routing on my current application.
 

###### Step 1: Re-heat your coffee, it’s probably cold now.
 
###### Step 2: You will need to install **React Router** if you haven’t already.  You can do this by running the command: **npm install react-router-dom** inside your terminal. 

```

npm install react-router-dom

```
###### Step 3: Next, you must import a few things to begin using React Router in your App.js file.

![imports need for router](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w33yt6y4vl0472pgsevg.jpeg)
 
###### Step 4:  Now, you can create a variable name **router** that will hold the **createBrowserRouter** object, this will allow your URL to update and manage the history stack using the DOM History API. The **createBrowserRouter** may have already been available prior to this most recent update but was not required. Using another function provided to us by React Router, **createRoutesFromElements**, you will place each route with its corresponding element inside of here.  

![creating createBrowserRouter object ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whguh633p1be0i2c5a4i.jpeg)
 
###### Step 5:  Now, if you notice the first **path= ’/ ’** has the **element: <Root />**.  We have not created this **Root** element yet, so we’ll take care of that now. The **Root** element’s purpose is to help structure anything related to the router on your application that isn’t defining routes, like our navigation or a global styling component.
###### Towards the bottom, underneath the return statement, define the **Root** component. Inside of the **Root** component, you will also need to use **<Outlet />**. It sort of works like a placeholder to show how you are going to display the other pages or routes inside of the **Root** component. 


![setup of Root component ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ww5sm2qsxbzqfqfw9j8.jpeg)

###### So, essentially every page in your application will have a navigation bar and whichever route is supposed to be displayed.
 
###### Step 6: Great! Now that our Root component is completed, you can create the other routes inside of it.  This part should look familiar if you already have experience with React Router, when you would create a component tree and place the routes inside of the return statement using BrowserRouter, Route, and Routes. The “Home” page path will now be *index* (meaning the first page).
 
![setting up other routes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vj9mrr5l4nu1nrxehqu.jpeg)
 
###### Step 7: Almost done! Now we want our application to be able to display our routes. To do this, we need to use a **RouterProvider** inside of the return statement.  The **RouterProvider** is a self-closing component. You need a prop called *router* and you’ll pass in the **router** that you created.
 
 
![provider image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fs5gxl5yeyiv5bpick8m.jpeg)
 
Now, you should be able to go to your browser, refresh, and see the changes.
 
I’m sure there is plenty more to learn and if you’re interested you can go to [reactrouter.com](https://reactrouter.com/)

##### Boom! Just like that you’re all caught up like me…. now go finish your unfinished projects!