关于目录结构与路由的问题

[FoundTheWOUT]

这不是一个问题，仅仅是想讨论一下现在目录结构

frontend/packages/website/src/App.tsx

Line 3 in c850dd9

import pageRoutes from '~react-pages'

打印 vite-plugins-page 的 pageRoutes ，可以发现其路由结构为

[
    {
        "path": "group",
        "element": {},
        "children": []
    },
    {
        "path": "/",
        "element": {}
    },
    {
        "path": "login",
        "children": []
    },
    {
        "path": "subject",
        "children": []
    }
]

感觉和预期的不太符，理想的应该是这样

[
    {
        "path": "/",
        "element": {}, // <-可以作为GlobalLayout
        "children": [
            {
                "path": "group",
                "element": {},
                "children": []
            },
            {
                "path": "subject",
                "children": []
            }
        ]
    },
    {
        "path": "login",
        "element": {}
    }
]

在第一种路由结构下，App.tsx 中需要根据路径切换 Layout

frontend/packages/website/src/App.tsx

Lines 8 to 19 in c850dd9

	const App: FC = () => {
	const location = useLocation()
	return (
	<UserProvider>
	<Suspense fallback={null}>
	{
	isNoLayoutRoute(location.pathname)
	? useRoutes(pageRoutes)
	: <GlobalLayout>{useRoutes(pageRoutes)}</GlobalLayout>
	}
	</Suspense>
	</UserProvider>

在第二种路由结构下，只需在 pages/index.tsx 包裹 Layout 就可，login 不在相同路径，无需处理 Layout 问题。
因此我提议在 pages/ 下新建一个 index 目录，然后把需要 GlobalLayout 包裹的页面放入该目录内，以生成第二种目录结构，也即是这样

|-- pages
|    |-- index
|    |    |-- group
|    |    |-- subject
|    |-- index.tsx <- GlobalLayout wrap in here
|    |-- login.tsx

然后就不需要在 App.tsx 中进行判断。

更复杂的情况

有的时候，我们在子路由中也有这种相同根，但不同路径不同 Layout 的需求。比如小组页面。

因此，我们可能需要这样的路由结构

{
    "path": "group",
    "children": [
        {
            "path": ":name",
            "element": {}, // <- GroupLayout
            "children": [
                {
                    "path": ""
                },
                {
                    "path": "forum"
                },
                {
                    "path": "members"
                }
            ]
        },
        {
            "path": "topic", // <- no layout
            "children": [
                {
                    "path": "" // <- error page
                },
                {
                    "path": ":name"
                }
            ]
        }
    ]
}

与根的情况相似的，其对应的目录结构是这样

|-- group
|    |-- [name]
|    |    |-- index.tsx
|    |    |-- forum.tsx
|    |    |-- members.tsx
|    |-- [name].tsx <- GroupLayout wrap in here
|    |-- topic.tsx

[Ayase-252]

那第二种 login 放哪？

[FoundTheWOUT]

放在 page 下就行。说实话，next的路由约定有各种各样无法覆盖到的情况，以至于他们已经另起炉灶了。他们这次又新造了好多概念，什么mutiroot之类的……好在我们用了 react-route，这些通通都不是问题。只要vite 的插件支持就行

[Ayase-252]

感觉可以试试