Routing with React Router V6

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:

$ npm i react-router@next react-router-dom@next

or with yarn:

$ yarn add react-router@next react-router-dom@next

<Route/>

In previous versions, you could use the route element like:

<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:

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

<Routes/>

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

<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:

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:

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:

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.

Comments

[Paras 🧙‍♂️]

Nice one !! :)