React Router V6 Tips+Examples
Tags: react, webdev, beginners, javascript
Published: 2022-07-26 23:42:00

While I was working on a personal project recently using React, I realized that I could not find much up-to-date information on one of the most common things that every website would need: routing. 

Here is the [official documentation of React Router](https://reactrouter.com/docs/en/v6), but I thought I might as well provide some real-life applicated examples of the React Router and some small, useful tips.

To start off, React Router is a library that allows you to add routes to your React App. A website usually has multiple pages. For instance, let's say you're building a personal website to show off your projects. The main page would have a short introduction of yourself with some nice, professional pictures. Then you might want a separate page to put down your portfolio of your projects and work experiences. You also might want to add a contact page so that people can reach out to you. 

In HTML, you would normally create a navigation bar that contains all of the links to your different pages with an `<a>` tag with scripts for each page. That's cool too, but in React, there is a much simpler way of organizing your routes: using the React Router.

## Installation

First, install the React Router library using the following command. 

```
npm install react-router-dom
```
You can always confirm your dependencies in your `package.json`.
Your `package.json` should have `react-router-dom` as a dependency as such. 

```json
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
```


## Adding Routes

The next step is to add your Routes. There are multiple ways of structuring your routes. You could create a file for all of your routes, but since my application does not need a lot of routes, I opted to add my routes in my `App.js`.

Import `BrowerRouter` as the following.

```js
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
```
If you have directly imported the above in your `App.js` as I did, wrap your app in `<Router>`. Then, wrap all of your `Route` in `Routes`. The following is how I did it.

```js
function App() {
  return (
    <Router>
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route exact path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}
```
Now you have two pages!

The `exact` prop in the `<Route />` component serves to avoid confusion for the React Router. What does this mean?

Let's say you have two different routes as such without `exact` in neither of the routes.

```js
<Route path="/about/1" element={<AboutMe />} />
<Route path="/about/2" element={<AboutYou />} />
```
This could potentially cause partial matching problems. For example, the URL /create/user/123 will match the routes /create or /create/user/. Therefore, to avoid any room for bugs, I would suggest that you include `exact` in most of your routes.

The `path` prop specifies your route. For example, `/` would be equivalent to `http://localhost:3000/`, and `/about` would be equivalent to `http://localhost:3000/about`.

The `element` prop determines what to display. For me, in my `/` route, I wanted to display my `<Home />` component and my `/about` route my `<About />` component.

What about nested routes? 
For me, I had to have different links for my posts, so I thought the structure of `/posts/idNumber` would be suitable for my post routes.

```js
<Route path="/posts" element={<Post />}>
  <Route path="/posts/:postId" element={<Post />} />
</Route>
```
Rather than using the self-closing tag, nest your children routes inside your parent tags. 


## Linking

So where does the actual linking happen?

1. Navigate to the file that you want the actual link in.

1. Import `Link`.

1. Create the link!
```js
import { Link } from 'react-router-dom'

....

<Link to={`/posts/${id}`}>See More</Link>
```
The `to` prop is the route in this case. It serves the same purpose as `ref` of the `<a>` tag.

But what if you want to pass information to the link?

Simply create an object with the information that you want to pass to the link. Then pass the object through the `state` prop of `<Link />`
For me, I had to pass the props so this is how I did it.

```js
const restaurantData = {
		id: id,
		name: name,
		location: location,
		zipCode: zipCode,
		coordinates: coordinates,
		phone: phone,
		price: price,
		rating: rating
}

...

<Link to={`/posts/${id}`} state={restaurantData}>See More</Link>
```


That's it! One tip I would give is that plan out your routes before actually implementing your webapp. Of course you always run into situations where you have to modify your original plan, but having a general structure of your website and lining our your routes beforehand always helps.