반응 런처

정적 경로를 사용하여 작성된 React-Router 기반 실행기

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

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

app.start();

플러그인 메커니즘 세트 지원

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는 Router 구성 요소의 외부 레이어에 래핑되며, 전역적으로 고유한 것으로 해석될 수 있는 Router의 부모로서 inner는 각 Route 구성 요소 외부에 래핑됩니다. 일반적인 시나리오는 경로 인증입니다. 위의 코드에서와 같이

내가 왜 이것을 쓰고 있습니까?

회사의 실제 프로젝트에서 모두가 기본 React-Router이며 동적 라우팅 유연성을 기반으로 합니다. 1. 프로젝트의 경로 구성 논리를 추적할 수 없으며 초보자가 페이지를 찾으려면 가장 바깥쪽 레이어 레이어에서 찾아야 합니다. 2. 일부 제어 논리(인증), 일반 논리(페이지 제목) 및 기타 요구 사항에 대해 캡슐화 형식이 균일하지 않습니다.

개인적으로 현재 React-Routerdynamic routing를 사용하고 있지만 실제 동적 라우팅의 기능을 사용하지 않고 있다는 느낌이 듭니다. 기능은 렌더링 시간에 응용 프로그램의 경로를 변경하는 기능, 즉 반응형 라우팅이므로 결과적으로 동적 라우팅의 유연성도 사용되지 않고 정적 라우팅의 단순성도 손실되지 않으며 응용 프로그램에서 라우팅의 모든 이점을 사용할 수 있습니다. 한눈에 볼 수 있습니다.

프로젝트 주소: https://github.com/myNameIsDu/react-launcher

개인적인 편견이니 틀린 부분 있으면 지적 부탁드립니다