@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

Router

The @remix-run/router package is the heart of React Router and provides all the core functionality for routing, data loading, data mutations, and navigation.

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.

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 using react-router RouteObject's
  routes,
  // History instance
  history,
  // Optional hydration data for SSR apps
  hydrationData?: HydrationState;
}).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 {
  // 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[];
  // False during the initial data load, true once we have our initial data
  initialized: boolean;
  // The state of the current navigation
  navigation: Navigation;
  // The state of an in-progress router.revalidate() calls
  revalidation: RevalidationState;
  // Scroll position to restore to for the active Location, false if we
  // should not restore,m or null if we don't have a saved position
  // Note: must be enabled via router.enableScrollRestoration()
  restoreScrollPosition: number | false | null;
  // Proxied `resetScroll` value passed to router.navigate() (default true)
  resetScrollPosition: boolean;
  // 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>;
}

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.