Routing with React Router V6
Tags: react, javascript, reactrouter, navigation
Published: 2020-06-17 15:56:47

React Router has been the go to routing solution for most react applications. Is simple to use and offers tons of features. If you've used react router before you'd be pleased to know it just got better with its next major version, version 6. Now, react router version 6 is currently in alpha. But it's expected to launch a stable version soon. Also you should know this post is for people already familiar with react router.

Now lets talk about some key changes with react router version 6. First of all, it has smaller bundle sizes but still manages to pack in more functionality.

### Installation
Run the following command to install with npm:
```bash
$ npm i react-router@next react-router-dom@next
```

or with yarn:
```bash
$ yarn add react-router@next react-router-dom@next
```

## `<Route/>`
In previous versions, you could use the route element like:

```jsx
<Route path="/" component={Home} />
<Route path="/" render={() => <Home/>} />
<Route path="/" children={<Home/>} />
<Route path="/">
  <Home/>
<Route/>
```

These methods don't work in version 6. In version 6, you can use the `<Route/>` element as:

```jsx
<Route path="/" element={<Home/>} />
```

## `<Routes/>`
The `<Switch/>` component has been replaced by `<Routes/>` in version 6. So you can do something like:

```jsx
<Routes>
  <Route path="/" element={<Home/>} />
  <Route path="/user" element={<User/>} />
<Routes/>
```

It is important to note that all `<Route/>` elements must be wrapped in `<Routes/>` element. Also we no longer need to use the `exact` prop on `<Route/>`. Routes are matched exactly by default.

## Nesting Routes
Nesting routes in older versions of react router was a bit non-intuitive. But version 6 makes it easier:

```jsx
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users" element={<Users />}>
          <Route path="/" element={<UsersIndex />} />
          <Route path=":id" element={<UserProfile />} />
          <Route path="me" element={<OwnUserProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Outlet />
    </div>
  );
}
```

The `<Outlet/>` component in `Users` component serves as a placeholder. It will render a component depending on the current location.

## Object-based Routes

Version 6 allows us to define routes as JavaScript objects using the `useRoutes()` hook which accepts an array of route objects. A route object has the same properties as a `<Route>`. For example the routes above can also be defined as:

```jsx
function App() {
  let element = useRoutes([
    // element. The `children` is just an array of child routes.
    { path: '/', element: <Home /> },
    {
      path: 'users',
      element: <Users />,
      children: [
        { path: '/', element: <UsersIndex /> },
        { path: ':id', element: <UserProfile /> },
        { path: 'me', element: <OwnUserProfile /> },
      ]
    }
  ]);

  return element;
}
```

It is important to note that the `useRoutes()` hook must be in context of `<BrowserRouter/>`. That is why we removed it from the `App`.

## `useNavigate()`
React router version 6 replaces the `useHistory()` hook with the `useNavigate()` hook. Which can be used as below:

```jsx
function App() {
  let navigate = useNavigate()

  return (
    <div>
      <button onClick={() => navigate("/home")}>
        Go Home
      </button>
    </div>
  );
}
```

You can pass a second optional parameter in `navigate`. It will be an object and it can contain `state` if you want to pass in state. You can also pass in `replace:true` to mimic the behavior of `history.replace()`.

Alternatively, you can also pass in a positive or negative integer in the `navigate` function. This will navigate us forward or backwards in the browser history stack. For example `navigate(1)` will take us 1 page forward. Similarly, `navigate(-2)` will take us 2 pages back.

### Conclusion

To wrap up react router version 6 brings cool new features. And makes it more intuitive to use. There are some more minor features which I haven't mentioned. But I have covered the main features coming in react router version 6. And that should be enough to get you started with it.