@types/react-router-config

What is @types/react-router-config?

@types/react-router-config provides TypeScript definitions for the react-router-config package, which is used to configure routes in a React application. It helps developers by providing type safety and autocompletion for route configuration objects.

What are @types/react-router-config's main functionalities?

Route Configuration

Defines an array of route configurations, specifying the path, whether the route should be matched exactly, and the component to render.

const routes: RouteConfig[] = [
  {
    path: '/',
    exact: true,
    component: HomeComponent
  },
  {
    path: '/about',
    component: AboutComponent
  }
];

Nested Routes

Allows defining nested routes within a parent route, enabling complex routing structures.

const routes: RouteConfig[] = [
  {
    path: '/',
    component: App,
    routes: [
      {
        path: '/home',
        component: HomeComponent
      },
      {
        path: '/about',
        component: AboutComponent
      }
    ]
  }
];

Route Matching

Uses the matchRoutes function to match a given pathname against the route configuration, returning an array of matched routes.

import { matchRoutes } from 'react-router-config';

const branch = matchRoutes(routes, '/about');
console.log(branch);

Other packages similar to @types/react-router-config

react-router

react-router is the core routing library for React. It provides a more comprehensive set of routing features compared to react-router-config, including hooks, context, and more dynamic routing capabilities.

react-router-dom

react-router-dom is a package that provides DOM bindings for React Router. It includes components like BrowserRouter and Link, which are essential for web applications. It is more feature-rich and flexible compared to react-router-config.

react-router-redux

react-router-redux is a package that integrates React Router with Redux. It allows for managing router state within a Redux store, providing a more unified state management approach. It offers different functionalities compared to react-router-config, focusing on state management.

README

Installation

npm install --save @types/react-router-config

Summary

This package contains type definitions for react-router-config (https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-router-config.

index.d.ts

import { Location } from "history";
import * as React from "react";
import { match, RouteComponentProps, SwitchProps } from "react-router";

export interface RouteConfigComponentProps<Params extends { [K in keyof Params]?: string } = {}>
    extends RouteComponentProps<Params>
{
    route?: RouteConfig | undefined;
}

export interface RouteConfig {
    key?: React.Key | undefined;
    location?: Location | undefined;
    component?: React.ComponentType<RouteConfigComponentProps<any>> | React.ComponentType | undefined;
    path?: string | string[] | undefined;
    exact?: boolean | undefined;
    strict?: boolean | undefined;
    routes?: RouteConfig[] | undefined;
    render?: ((props: RouteConfigComponentProps<any>) => React.ReactNode) | undefined;
    [propName: string]: any;
}

export interface MatchedRoute<
    Params extends { [K in keyof Params]?: string },
    TRouteConfig extends RouteConfig = RouteConfig,
> {
    route: TRouteConfig;
    match: match<Params>;
}

export function matchRoutes<
    Params extends { [K in keyof Params]?: string },
    TRouteConfig extends RouteConfig = RouteConfig,
>(routes: TRouteConfig[], pathname: string): Array<MatchedRoute<Params, TRouteConfig>>;

export function renderRoutes(
    routes: RouteConfig[] | undefined,
    extraProps?: any,
    switchProps?: SwitchProps,
): React.JSX.Element;

Additional Details

• Last updated: Wed, 06 Dec 2023 06:36:35 GMT
• Dependencies: @types/history, @types/react, @types/react-router

Credits

These definitions were written by John Reilly, and Mathieu TUDISCO.