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.