@umijs/route-utils

What is @umijs/route-utils?

@umijs/route-utils is a utility library for managing and manipulating routes in UmiJS applications. It provides a set of functions to handle route configurations, flatten nested routes, and match routes based on paths.

What are @umijs/route-utils's main functionalities?

Flatten Nested Routes

This feature allows you to flatten nested route configurations into a single-level array. This can be useful for simplifying route management and ensuring all routes are easily accessible.

const { flattenRoutes } = require('@umijs/route-utils');

const nestedRoutes = [
  {
    path: '/',
    routes: [
      { path: '/home', component: 'Home' },
      { path: '/about', component: 'About' }
    ]
  }
];

const flatRoutes = flattenRoutes(nestedRoutes);
console.log(flatRoutes);

Match Routes

This feature allows you to match a given path against a set of routes and retrieve the matched route(s). This is useful for route validation and dynamic route handling.

const { matchRoutes } = require('@umijs/route-utils');

const routes = [
  { path: '/home', component: 'Home' },
  { path: '/about', component: 'About' }
];

const matchedRoutes = matchRoutes(routes, '/home');
console.log(matchedRoutes);

Generate Route Paths

This feature allows you to generate a path string from a path template and parameters. It is useful for creating dynamic URLs based on route parameters.

const { generatePath } = require('@umijs/route-utils');

const pathTemplate = '/user/:id';
const path = generatePath(pathTemplate, { id: 123 });
console.log(path);

Other packages similar to @umijs/route-utils

react-router

React Router is a popular library for routing in React applications. It provides similar functionalities such as route matching and path generation, but it is more comprehensive and tightly integrated with React.

path-to-regexp

path-to-regexp is a utility for matching and parsing URL paths. It provides similar path matching and generation capabilities but is more low-level and not specifically tied to any framework.

route-parser

route-parser is a lightweight library for parsing and generating URL routes. It offers similar functionalities for route matching and path generation but is simpler and more focused on basic route parsing.

README

@umijs/route-utils

Usage

# npm
npm i @umijs/route-utils --save

## yarn
yarn add @umijs/route-utils

API

import { transformRoute, getMatchMenu } from '@umijs/route-utils';

const routes = [
  {
    path: '/welcome',
    name: 'welcome',
  },
  {
    path: '/admin',
    name: 'admin',
    access: 'canAdmin',
  },
  {
    name: 'list.table-list',
    path: '/list',
  },
];

const { menuData, breadcrumb } = transformRoute(routes);

console.log(menuData[0].name); // welcome

console.log(breadcrumb.get('/welcome').name); // welcome

MenuDataItem

import { MenuDataItem } from '@umijs/route-utils';

export interface MenuDataItem {
  routes?: MenuDataItem[];
  hideChildrenInMenu?: boolean;
  hideInMenu?: boolean;
  icon?: React.ReactNode;
  locale?: string | false;
  name?: string;
  key?: string;
  pro_layout_parentKeys?: string[];
  path?: string;
  [key: string]: any;
}

LICENSE

MIT