React-route-generate NPM

react-route-generate

Usage

Execute the following command anywhere to globally install this tool:

npm install react-route-generate -g

Install the tool package again in the project where you want to use it:

npm install react-route-generate --dev

Now you can use this tool in your project.

Purpose

This tool allows you to declare routes using annotations and generate the corresponding configuration file with the following options:

export interface IAutoRoute {
  routeName: string;
  lazy?: boolean;
  keepAlive?: boolean;
  cacheWithParams?: Array<string>;
}

This configuration is used to generate the specified configuration, but it does not have a practical effect during runtime. The implementation is as follows:

export function autoGenerateRoute(options: IAutoRoute) {
  return (target: any) => target;
}

Usage

In your project, simply add the autoGenerateRoute annotation wherever you want to generate the route configuration, for example:

...
import { autoGenerateRoute } from 'react-route-generate';

@autoGenerateRoute({
  routeName: '/createArchive',
})
@inject(`app`)
@observer
export default class CreateArchivePage extends BasePage<CreateArchiveStore> {
    ...
}

By doing this, you have declared a route. Then, execute the following command in the project's root directory:

react-route-generate generate

You will obtain a route configuration file like this:

import React, { lazy } from 'react';
import CreateArchivePage from '@/pages/Archives/CreateArchive';

/**
 * This file is auto-generated by react-route-generate, do not modify.
 * 这个文件由插件自动生成，请不要修改。
 */

export const router = [
  {
    path: '/createArchive',
    component: CreateArchivePage,
  },
];

The annotation also supports React's lazy function. Simply set lazy to true:

...
import { autoGenerateRoute } from 'react-route-generate';

@autoGenerateRoute({
  keepAlive: true,
  routeName: '/archiveDetails',
  lazy: true,
})
@inject(`app`)
@observer
@withActivation
export default class ArchiveDetailsPage
  extends BasePage<ArchiveDetailsStore>
  implements IKeepAlive
{
    ...
}

The generated configuration will be as follows:

...
  {
    path: '/archiveDetails',
    component: lazy(() => import('@/pages/Archives/ArchiveDetails')),
    keepAlive: true,
  },
...

The plugin is only responsible for generating the configuration file. The usage of keepAlive and the specific implementation of the route is left to you.

Configuration

The tool has a configuration file named router.config.ts, which affects the behavior of the plugin:

const routeConfig = {
  /**
   * Scan file base path
   */
  baseDir: "src/pages",
  /**
   * Setup generate file output path
   */
  outputDir: "src/routes",
  /**
   * Config file output name. This file can be used in the project.
   */
  outFileName: "routeConfig",
  /**
   * Output file extension. The default is `.ts`.
   */
  outFileExt: "ts",
  /**
   * Load file match regex
   */
  match: "**/*.ts",
  /**
   * Replace alias
   */
  paths: {
      '@/': ['*']
  },

  /**
   * Base project URL, with tsconfig
   */
  baseUrl: 'src',

 

 /**
   * Project root directory, with tsconfig
   */
  rootDir: './' 
};
exports.default = routeConfig;

The configuration file is generated automatically when the plugin is first run, so you don't need to create it manually.

baseDir
Set the directory where the plugin will search for files with annotations.
outDir
Set the output directory for the generated files.
outFileName
Set the name of the output file.
outFileExt
Set the file type of the output file.
match
Set the regular expression for matching annotated files.
paths
Used to generate alias routes.
baseUrl
Set the base directory for path generation. It can be set according to tsconfig.json.
rootDir
Set the root directory for path generation. It can be set according to tsconfig.json.