Introduction to React Location

A Modern React Router with Async Routing and More Features

React Location is a recently launched alternative library for React Router. As a React developer, I found it very interesting since it brings a new perspective to React routing.

In this article, I will discuss the features of React Location and compare it with React Router to give you a better understanding.

Introduction to React Location

https://react-location.tanstack.com/

React Location is a powerful client-side library recently introduced which allows you to implement routing. At first, it was introduced as a wrapper for the react Router v6 beta release. But, now, React Location can be recognized as a solid alternative to React Router library since it provides unique features like;

• Synchronous route elements.
• Data loaders.
• Search param APIs.
• Nested routing.
• Code-splitting.

Apart from that, React Location supports almost all the features of React Router, and allows to extend its features via plugins.

Installing React Location

Installing React Location is pretty straightforward. You can treat it like any other JavaScript library and install it using NPM or Yarn.

// NPM
npm install react-location --save
// Yarn
 yarn add react-location
// Usage
import {ReactLocation,Router,useMatch} from "react-location";

Basics of React Location

If you have previously worked with React Router, working with React Location is quite similar. However, it would be better to get some basic understanding of React Location to master it further.

1. Router Component

React Location provides a component named Router as the root provider component for ReactLocation instance. It is responsible for handling all the routing configurations of your application.

React Location router component without child props

The above example shows how to use React Location Router without any child props. However, if you want to use child props, you need to add <Outlet /> to render the routes.

React Location router component with child props

2. Defining Routes with React Location

React Location route definition is pretty similar to React Router.

It considers routes as array objects, and each object can contain more routes as child arrays. However, there are several rules you need to follow when defining routes with React Location.

Important rules to follow when defining routes with React Location

• Routes are matched in the order they are specified.
• If you don't define a path to a route, the default path will be path: *
• If you don't define an element to a route, the default element will be element: <Outlet />
• If index routes (/)do not have children, they will be considered exact.
• Param'd routes, wildcard routes, and routes without paths will always match when encountered.
• No search params will always match.

Defining React Location

Also, React Location supports code splitting and async data loading with routes.

The below code snippet shows how to use React Location to retrieve article data using the route parameters.

Using React Location to retrieve data

You can find more information about code splitting and async data loading in their documentation.

3. Internal Navigations using React Location

React Location provides a component named Link for internal navigations. For example, if you create a navigation bar, you can use Link components to handle it’s navigations.

These components work flawlessly with other usual browser functions like open in new tab, ctrl + left click, and open in new window. Also, you can update pathnames, search parameters, and hashes using Link components.

Implementing internal navigations using React Location

4. Navigate Component in React Location

We can use Navigate component similar to the Link component. However, they are used for declaratively and relatively navigating to any route instead of generating internal navigations links.

function App () {
   return <Navigate to='./about'>
}

Besides, React Location also provides a Hook called useNavigation for the same purpose. I will explain it more in the next section.

5. Using Hooks in React Location

React Location library provides a set of Hooks to manage routes easily. So, let's see what the functionalities of these Hooks are and how we can use them.

useMatch and useMatches

useMatch and useMatches Hooks return the nearest route match within the context it was called. Thus, they can access route data, route params, and the next child match in a route.

The only difference between them is that useMatch returns only 1 match while useMatches returns all the route matches within the context.

Use of useMatch() in React Location

useNavigate

useNavigate Hook allows you to programmatically navigate your application.

Use of useNavigate() in React Location

usePrompt

usePrompt Hook can be used to create prompt dialogs. It takes 2 input parameters as message and when.

• message — String which is displayed as the prompt message.
• when — Boolean, which defines the condition of the prompt display.

export function usePrompt(
   message: string, 
   when: boolean | any
): void

In addition to the above discussed 4 main Hooks, React Location supports 4 more Hooks named useSearch, useMatchRoute, useRouter and useResolvePath. You can find more details about them in the documentation.

6. Plugins Support for React Location

Since React Location is a relatively new library, some of its features are still developing. However, we can use several 3rd party plugins with React Location to fill those gaps.

Ranked Routes

Ranking routes can be really useful to avoid confusion between route selection. For example, if we consider the React Router, by default, it will rank the routes according to the number of segments and mick the most matching route.

But, React Location doesn't provide inbuilt support for that, and you have to use a 3rd party plugin called react-location-rank-routes and manually implement this feature.

All you need to do is install react-location-rank-routes using NPM and include it as the filterRoutes option in the Router component.

// NPM
npm i react-location-rank-routes
// Yarn 
yarn add react-location-rank-routes
// Usage
<Router
   location={location}
   filterRoutes={rankRoutes}
   routes={[
      ...
   ]}
/>

Caching for Loaders

Previously, I mentioned that we could use React Location to load data from API endpoints asynchronously. But, that's not all. React Location supports a plugin called react-location-simple-cache which can be used to create a cache for route loaders.

You can easily install it using NPM or Yarn and start caching your data from the route file itself.

// NPM
npm i react-location-simple-cache
// Rarn 
yarn add react-location-simple-cache
// Usage
import { ReactLocationSimpleCache } from 'react-location-simple-cache'
<Router
   {         
      path: ':articleId',         
      element: <Article />,         
      loader: routeCache.createLoader( async ({ params }) => ({           
         article: await getArticlesById(params.articleId),         
      })),       
   }
/>

Also, react-location-simple-cache library provides a set of functions to read, find and clear cached items.

• cache.clearAll — Clears the cache.
• cache.find — returns the first matching record.
• cache.invalidate — Invalidates cache items.
• cache.filter — Filter and returns records.

In addition to these 2 plugins, there are other plugins like react-location-jsurl and react-location-elements-to-routes that can improve the developer experience of React Location.

React Location vs React Router

React Location is an excellent alternative for React Router. However, They both have some common features as well as several differences.

So, I thought comparing the core features of these 2 libraries using the chart below would give you a clear understanding of their similarities and differences.

Conclusion

Compared to React Router, React Location is a lot younger and some of the features are still under development. But, the React Location team has been able to reduce the gap between these 2 libraries by introducing 3rd party support libraries.

Also, it has a whole new set of features related to asynchronous routing and data loaders to put it ahead of React Router.

So, I invite you all to try out React Location for your next project and share your thought in the comments section.

Thank you for reading !!!

Build composable web applications

Don’t build web monoliths. Use Bit to create and compose decoupled software components — in your favorite frameworks like React or Node. Build scalable frontends and backends with a powerful and enjoyable dev experience.

Bring your team to Bit Cloud to host and collaborate on components together, and greatly speed up, scale, and standardize development as a team. Start with composable frontends like a Design System or Micro Frontends, or explore the composable backend. Give it a try →

Learn More

How We Build Micro Frontends

How we Build a Component Design System

The Composable Enterprise: A Guide

7 Tools for Faster Frontend Development in 2022