react-launcher

Wed, 07 Sep 2022 05:45:46 +0000

A React-Router based launcher, written using static routes

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

const app = new Launcher({
    routes: RouterConfig,
});

app.start();

Support for a set of plugin mechanisms

const plugin = {
    name: 'auth',
    outer: (children, opt) => {
        return <AuthProvider opt={opt}>{children}</AuthProvider>;
    },
    inner: (children, route, opt) => {
        return (
            <AuthRouteComponent route={route} opt={opt}>
                {children}
            </AuthRouteComponent>
        );
    },
};

const Home = () => <div>home</div>;
const About = () => <div>about</div>;

const app = new Launcher({
    routes: [
        {
            path: '/',
            component: Home,
        },
        {
            path: '/about',
            component: Home,
            // /about authentication is required
            hasAuth: true,
        },
    ],
});
app.use(plugin, opt);

outer will be wrapped in the outer layer of the Router component, as the parent of the Router, which can be interpreted as globally unique, inner will be wrapped outside each Route component, a common scenario is route authentication, as in the code above

Why am I writing this?

In the company's actual project, everyone is native React-Router, based on dynamic routing flexibility, 1. the project's route organization logic is not traceable, a novice want to find a page, you have to find from the outermost layer layer, 2. encapsulation form is not uniform, for some control logic (authentication), generic logic (page title) and other needs, each application Encapsulation of a large number of BasicRoute, TitleRoute and some interception of the operatio

Personally, I feel that while I'm currently using React-Router's dynamic routing,But we don't use the real features of dynamic routing, which according to the example on the official website is a route generated at rendering time, and its feature is the ability to change the application's route at rendering time, i.e. responsive routing, so the result is that neither the flexibility of dynamic routing is used, nor the simplicity of static routing is lost, and all the advantages of routing in the application can be seen at a glance.

Project Address：https://github.com/myNameIsDu/react-launcher

Personal bias, please correct me if I'm wrong

DEV Community: 度

react-launcher