tessl/npm-react-router-native

Declarative routing for React Native applications with native-specific components and deep linking support

—

Pending

Overview

Eval results

Files

React Router Components

Name: tessl/npm-react-router-native
Author: tessl

Complete re-export of React Router components for building declarative route structures in React Native applications. These components provide the core routing functionality inherited from React Router.

Capabilities

MemoryRouter

A <Router> that keeps the history of your "URL" in memory (does not read or write to the address bar). Useful for tests and non-browser environments like React Native.

/**
 * A Router that keeps history in memory
 * Ideal for React Native and testing environments
 * @param props - Router configuration
 * @returns JSX.Element router component
 */
interface MemoryRouterProps {
  basename?: string;
  children?: React.ReactNode;
  initialEntries?: InitialEntry[];
  initialIndex?: number;
  future?: Partial<FutureConfig>;
}

function MemoryRouter(props: MemoryRouterProps): JSX.Element;

Routes

A container for a nested tree of <Route> elements that renders the branch that best matches the current location.

/**
 * Container for nested Route elements
 * Renders the best matching route branch
 * @param props - Routes configuration
 * @returns JSX.Element routes container
 */
interface RoutesProps {
  children?: React.ReactNode;
  location?: Partial<Location> | string;
}

function Routes(props: RoutesProps): JSX.Element;

Route

Declares an element that should be rendered at a certain URL path. Routes can be nested to create route hierarchies.

/**
 * Declares an element to render at a specific path
 * Can be nested for hierarchical routing
 * @param props - Route configuration
 * @returns JSX.Element route element
 */
interface RouteProps {
  caseSensitive?: boolean;
  children?: React.ReactNode;
  element?: React.ReactNode | null;
  index?: boolean;
  path?: string;
  loader?: LoaderFunction;
  action?: ActionFunction;
  errorElement?: React.ReactNode | null;
  shouldRevalidate?: ShouldRevalidateFunction;
  handle?: RouteHandle;
  lazy?: LazyRouteFunction<RouteObject>;
}

function Route(props: RouteProps): JSX.Element;

Navigate

A component that changes the location when it is rendered. Use it to redirect users to different pages.

/**
 * Component that navigates when rendered
 * Used for declarative redirects
 * @param props - Navigation configuration
 * @returns JSX.Element navigation component
 */
interface NavigateProps {
  to: To;
  replace?: boolean;
  state?: any;
  relative?: RelativeRoutingType;
}

function Navigate(props: NavigateProps): JSX.Element;

Outlet

Renders the child route's element, if there is one. Used in parent route elements to render their child routes.

/**
 * Renders child route elements
 * Used in parent routes for nested routing
 * @param props - Outlet configuration
 * @returns JSX.Element outlet for child routes
 */
interface OutletProps {
  context?: unknown;
}

function Outlet(props?: OutletProps): JSX.Element;

Router

The low-level interface shared by all router components. Typically you'll use one of the higher-level routers instead.

/**
 * Low-level router interface
 * Usually used indirectly through higher-level routers
 * @param props - Router configuration
 * @returns JSX.Element router component
 */
interface RouterProps {
  basename?: string;
  children?: React.ReactNode;
  location: Partial<Location> | string;
  navigationType?: NavigationType;
  navigator: Navigator;
  static?: boolean;
}

function Router(props: RouterProps): JSX.Element;

RouterProvider

Provides router state to the component tree. Used with data routers created by createMemoryRouter.

/**
 * Provides router state to component tree
 * Used with data routers for advanced routing features
 * @param props - Router provider configuration
 * @returns JSX.Element router provider
 */
interface RouterProviderProps {
  router: Router;
  fallbackElement?: React.ReactElement | null;
  future?: Partial<FutureConfig>;
}

function RouterProvider(props: RouterProviderProps): JSX.Element;

Await

Component for handling deferred data in route loaders. Renders different content based on promise resolution state.

/**
 * Component for handling deferred loader data
 * Renders based on promise resolution state
 * @param props - Await configuration
 * @returns JSX.Element await component
 */
interface AwaitProps {
  children: React.ReactNode | AwaitResolveRenderFunction;
  errorElement?: React.ReactNode;
  resolve: TrackedPromise | any;
}

function Await(props: AwaitProps): JSX.Element;

Usage Examples

Basic Route Setup

import { MemoryRouter, Routes, Route } from "react-router-native";
import { View, Text } from "react-native";

function App() {
  return (
    <MemoryRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </MemoryRouter>
  );
}

function Home() {
  return (
    <View>
      <Text>Home Page</Text>
    </View>
  );
}

Nested Routes with Outlet

import { Routes, Route, Outlet } from "react-router-native";
import { View, Text } from "react-native";

function App() {
  return (
    <MemoryRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="products" element={<Products />}>
            <Route index element={<ProductList />} />
            <Route path=":id" element={<ProductDetail />} />
          </Route>
        </Route>
      </Routes>
    </MemoryRouter>
  );
}

function Layout() {
  return (
    <View>
      <Text>App Header</Text>
      <Outlet /> {/* Child routes render here */}
      <Text>App Footer</Text>
    </View>
  );
}

function Products() {
  return (
    <View>
      <Text>Products Section</Text>
      <Outlet /> {/* ProductList or ProductDetail render here */}
    </View>
  );
}

Conditional Navigation

import { Navigate } from "react-router-native";

function ProtectedRoute({ children }) {
  const isAuthenticated = useAuth();
  
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  
  return children;
}

function App() {
  return (
    <MemoryRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route 
          path="/dashboard" 
          element={
            <ProtectedRoute>
              <Dashboard />
            </ProtectedRoute>
          } 
        />
      </Routes>
    </MemoryRouter>
  );
}

Data Router with RouterProvider

import { createMemoryRouter, RouterProvider } from "react-router-native";

const router = createMemoryRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]);

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

Error Boundaries

import { Routes, Route } from "react-router-native";
import { View, Text } from "react-native";

function App() {
  return (
    <MemoryRouter>
      <Routes>
        <Route
          path="/"
          element={<Root />}
          errorElement={<ErrorBoundary />}
        >
          <Route path="products/:id" element={<Product />} />
        </Route>
      </Routes>
    </MemoryRouter>
  );
}

function ErrorBoundary() {
  return (
    <View>
      <Text>Something went wrong!</Text>
    </View>
  );
}

Types

interface MemoryRouterProps {
  basename?: string;
  children?: React.ReactNode;
  initialEntries?: InitialEntry[];
  initialIndex?: number;
  future?: Partial<FutureConfig>;
}

interface RoutesProps {
  children?: React.ReactNode;
  location?: Partial<Location> | string;
}

interface RouteProps {
  caseSensitive?: boolean;
  children?: React.ReactNode;
  element?: React.ReactNode | null;
  index?: boolean;
  path?: string;
  loader?: LoaderFunction;
  action?: ActionFunction;
  errorElement?: React.ReactNode | null;
  shouldRevalidate?: ShouldRevalidateFunction;
  handle?: RouteHandle;
  lazy?: LazyRouteFunction<RouteObject>;
}

interface NavigateProps {
  to: To;
  replace?: boolean;
  state?: any;
  relative?: RelativeRoutingType;
}

interface OutletProps {
  context?: unknown;
}

interface RouterProps {
  basename?: string;
  children?: React.ReactNode;
  location: Partial<Location> | string;
  navigationType?: NavigationType;
  navigator: Navigator;
  static?: boolean;
}

interface RouterProviderProps {
  router: Router;
  fallbackElement?: React.ReactElement | null;
  future?: Partial<FutureConfig>;
}

interface AwaitProps {
  children: React.ReactNode | AwaitResolveRenderFunction;
  errorElement?: React.ReactNode;
  resolve: TrackedPromise | any;
}

// Supporting types
type To = string | Partial<Path>;
type RelativeRoutingType = "route" | "path";
type InitialEntry = string | Partial<Location>;
type NavigationType = "POP" | "PUSH" | "REPLACE";

interface Location extends Path {
  state: any;
  key: string;
}

interface Path {
  pathname: string;
  search: string;
  hash: string;
}

Integration Notes

Memory-based: All routing in React Native uses memory-based history
Nested Routing: Full support for nested routes using Outlet components
Data Loading: RouterProvider and data routers support loader/action patterns
Error Handling: Built-in error boundary support for route-level error handling
State Management: Navigate and route props support passing state between routes

Install with Tessl CLI

npx tessl i tessl/npm-react-router-native

docs

index.md

native-routing.md

react-router-components.md

react-router-hooks.md

react-router-utilities.md

search-parameters.md

tile.json

tessl/npm-react-router-native