I want some explanation

[andrrms]

I am new to this framework and kinda new to React and I was trying to look for a decent routing system when I found your solution. Could you explain better how to implement it? I would like to create a project from scratch with this solution but I found the code very confusing.

[bdombro]

Yeah, I agree that the routing is confusing and perhaps overly complex. If I were you, I'd just rip out the routing and re-implement the routing from scratch.

…

On Sun, Sep 20, 2020 at 1:30 AM AndreoliBR ***@***.***> wrote: I am new to this framework and was trying to look for a decent routing system when I found your solution. Could you explain better how to implement it? I would like to create a project from scratch with this solution but I found the code very confusing. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#6>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAYE5SNMPVONGEWTVC4SOILSGWOPJANCNFSM4RTOZB4A> .

[siminture]

Routes and navigation menus are usually the same structure, similar to a sitemap file.
There are two options:

• define the page components, in the app page according to the sitemap structure to define the route, and in the navigation menu to do the same thing;
• define the sitemap, according to the sitemap to generate routing, navigation menu;

Including the title of the page, access control of the page, etc. can be defined in the sitemap file.

In this project, the routeConfig.js is a sitemap file.
The hierarchize function is used to generate a hierarchical path and page ID, and if you are so confused, you can manually specify the path and page ID without using it.

{
    key: 'home',
    uniqueId: 'home',
    name: 'Home',
    icon: 'Home',
    path: '/',
    component: React.lazy(() = > import('./components/pages/Dashboard')),
    children: [{
        key: 'login',
        uniqueId: 'home-login',
        path: '/login',
        name: 'Login',
        isPublic: true,
        isHidden: true,
        component: React.lazy(() = > import('./components/pages/Login')),
    }, {
        key: 'mangement',
        uniqueId: 'home-mangement',
        path: '/mangement',
        name: 'System Management',
        icon: 'managementApp',
        children: [{
            key: 'organization',
            uniqueId: 'home-mangement-organization',
            path: '/mangement/organization',
            name: 'Organization',
            icon: 'Org'
        }, ]
    }]
}

My more recommended solution is use the webpack plugin before packaging according to the pages directory structure to generate Sitemap files.

e.g. gatsby & gatsby source filesystem plugin
https://www.gatsbyjs.com/plugins/gatsby-source-filesystem/

[Akshay090]

@siminture thanks for making this starter project, it helped a lot.
I want to know more about this style of routing, can you link to something I can refer to.
I have previously seen this style in dashboards by Creative Tim, maybe this is a common pattern followed in dashboard projects.

[ace3]

at first , the route structure is really daunting, but after reading the hierarchize function, i really love the idea.