If you’re new to the React stack from Vue, and if you’re struggling with the React Router’s inability to easily implement centralized configuration management and route guard, I hope this article will help you.

I. Development background

React Router was used for development due to service requirements. In services, some pages can be accessed only after authentication. Use Vue + Vue Router to solve this problem. Use beforeEach hooks. The React Router does not provide such an API.

In addition, routes need to be managed in a centralized manner. That is, a route configuration file needs to be written to clearly indicate the nesting relationship of routes. The React Router doesn’t support this mode since version 4.x, in favor of the component-as-route concept.

Therefore, it is necessary to develop a component that supports centralized configuration management and route guard functions.

Ii. Project Address

This component is named Config Router. It is available now, but not perfect yet. You are welcome to modify and maintain it together.

The project is hosted on GitHub, and there are corresponding Chinese and English documents on how to use it.

GitHub address: github.com/syy11cn/con… .

Iii. Project Introduction

The Config Router is a routing library that supports centralized route configuration management and route guard functions. It needs to work with React Router 4.x or later.

You can use the RouterView component for route placeholder, similar to the

component in the Vue Router. This component provides an onEnter interface for implementing functionality similar to beforeEach. The path can only be released by calling the next method. You can also call next(redirectPath) to implement route redirection.

For detailed instructions, see readme.md for detailed instructions and sample code.

The Config Router also supports centralized route configuration management similar to Vue Router. Automatic rendering of nested routes is achieved by using an array to represent the nested structure of the route and passing the array to the RouterView component.

For nested array structures, see readme.md

Four, installation,

yarn add -D @syy11cn/config-router
Copy the code

or

npm i -D @syy11cn/config-router
Copy the code

Fifth, TODOs

  • Lazy route loading is supported
  • Write the test
  • Configure the CI/CD workflow

Six, afterword.

Welcome to the project or code aspects of the correction, also welcome interested students to participate in the maintenance of the project (of course, also a valuable ⭐ ~).

Currently, I am not able to write tests and configure GitHub CI/CD workflows due to my limited personal skills. I hope you can get directions. Thank you very much 🙏.