@remix-run/router

What is @remix-run/router?

The @remix-run/router package is a powerful routing library designed for the Remix framework, which is used for building modern web applications. It provides robust features for handling URL routing, navigation, and data loading in a React environment. The router is designed to work seamlessly with both client-side and server-side rendering, offering a flexible and efficient way to manage routes in a web application.

What are @remix-run/router's main functionalities?

Route Matching

This feature allows developers to define a set of routes and corresponding components. The router matches the current URL to the defined routes and renders the appropriate component.

import { createBrowserRouter, RouterProvider, Route } from '@remix-run/router';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />
  },
  {
    path: '/about',
    element: <About />
  }
]);

function App() {
  return <RouterProvider router={router} />;
}

Nested Routes

Nested routes allow for the organization of components into a hierarchy, matching nested paths to nested components, which is useful for creating complex layouts with sub-routes.

import { createBrowserRouter, RouterProvider, Route } from '@remix-run/router';

const router = createBrowserRouter([
  {
    path: 'dashboard',
    element: <DashboardLayout />, 
    children: [
      { path: 'stats', element: <Stats /> },
      { path: 'reports', element: <Reports /> }
    ]
  }
]);

function App() {
  return <RouterProvider router={router} />;
}

Data Loading

This feature supports defining data loading functions directly within the route configuration. These functions fetch necessary data before rendering the route's component, ensuring the component has all data it needs on initial render.

import { createBrowserRouter, RouterProvider, Route } from '@remix-run/router';

const router = createBrowserRouter([
  {
    path: '/profile',
    element: <Profile />, 
    loader: async () => {
      const data = await fetchUserProfile();
      return data;
    }
  }
]);

function App() {
  return <RouterProvider router={router} />;
}

Other packages similar to @remix-run/router

react-router

React Router is one of the most popular routing solutions for React applications. It offers similar functionalities to @remix-run/router, such as dynamic route matching, nested routes, and server-side rendering support. However, React Router operates more broadly within the React ecosystem, whereas @remix-run/router is specifically optimized for the Remix framework.

README

Remix Router

The @remix-run/router package is a framework-agnostic routing package (sometimes referred to as a browser-emulator) that serves as the heart of React Router and Remix and provides all the core functionality for routing coupled with data loading and data mutations. It comes with built-in handling of errors, race-conditions, interruptions, cancellations, lazy-loading data, and much, much more.

If you're using React Router, you should never import anything directly from the @remix-run/router or react-router packages, but you should have everything you need in either react-router-dom or react-router-native. Both of those packages re-export everything from @remix-run/router and react-router.

Warning

This router is a low-level package intended to be consumed by UI layer routing libraries. You should very likely not be using this package directly unless you are authoring a routing library such as react-router-dom or one of it's other UI ports.

API

A Router instance can be created using createRouter:

// Create and initialize a router.  "initialize" contains all side effects
// including history listeners and kicking off the initial data fetch
let router = createRouter({
  // Routes array
  routes: ,
  // History instance
  history,
}).initialize()

Internally, the Router represents the state in an object of the following format, which is available through router.state. You can also register a subscriber of the signature (state: RouterState) => void to execute when the state updates via router.subscribe();

interface RouterState {
  // False during the initial data load, true once we have our initial data
  initialized: boolean;
  // The `history` action of the most recently completed navigation
  historyAction: Action;
  // The current location of the router.  During a navigation this reflects
  // the "old" location and is updated upon completion of the navigation
  location: Location;
  // The current set of route matches
  matches: DataRouteMatch[];
  // The state of the current navigation
  navigation: Navigation;
  // The state of any in-progress router.revalidate() calls
  revalidation: RevalidationState;
  // Data from the loaders for the current matches
  loaderData: RouteData;
  // Data from the action for the current matches
  actionData: RouteData | null;
  // Errors thrown from loaders/actions for the current matches
  errors: RouteData | null;
  // Map of all active fetchers
  fetchers: Map<string, Fetcher>;
  // Scroll position to restore to for the active Location, false if we
  // should not restore, or null if we don't have a saved position
  // Note: must be enabled via router.enableScrollRestoration()
  restoreScrollPosition: number | false | null;
  // Proxied `preventScrollReset` value passed to router.navigate()
  preventScrollReset: boolean;
}

Navigations

All navigations are done through the router.navigate API which is overloaded to support different types of navigations:

// Link navigation (pushes onto the history stack by default)
router.navigate("/page");

// Link navigation (replacing the history stack)
router.navigate("/page", { replace: true });

// Pop navigation (moving backward/forward in the history stack)
router.navigate(-1);

// Form submission navigation
let formData = new FormData();
formData.append(key, value);
router.navigate("/page", {
  formMethod: "post",
  formData,
});

Fetchers

Fetchers are a mechanism to call loaders/actions without triggering a navigation, and are done through the router.fetch() API. All fetch calls require a unique key to identify the fetcher.

// Execute the loader for /page
router.fetch("key", "/page");

// Submit to the action for /page
let formData = new FormData();
formData.append(key, value);
router.fetch("key", "/page", {
  formMethod: "post",
  formData,
});

Revalidation

By default, active loaders will revalidate after any navigation or fetcher mutation. If you need to kick off a revalidation for other use-cases, you can use router.revalidate() to re-execute all active loaders.