mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-12 03:54:16 +00:00
improve route logic
This commit is contained in:
parent
b1e490d83f
commit
41e9dd454c
@ -1,5 +1,5 @@
|
||||
import React from "react"
|
||||
import { Route, Routes, useLocation, useNavigate, useParams } from "react-router-dom"
|
||||
import { BrowserRouter, Route, Routes, useNavigate, useParams } from "react-router-dom"
|
||||
import { Skeleton, Button, Result } from "antd"
|
||||
import config from "config"
|
||||
import loadable from "@loadable/component"
|
||||
@ -14,41 +14,50 @@ const DefaultLoadingRender = () => {
|
||||
return <Skeleton active />
|
||||
}
|
||||
|
||||
const paths = {
|
||||
const getPagePaths = () => {
|
||||
let paths = {
|
||||
...import.meta.glob("/src/pages/**/[a-z[]*.jsx"),
|
||||
...import.meta.glob("/src/pages/**/[a-z[]*.tsx"),
|
||||
}
|
||||
|
||||
const pathsMobile = {
|
||||
if (app.isMobile) {
|
||||
paths = {
|
||||
...paths,
|
||||
...import.meta.glob("/src/pages/**/[a-z[]*.mobile.jsx"),
|
||||
...import.meta.glob("/src/pages/**/[a-z[]*.mobile.tsx"),
|
||||
}
|
||||
|
||||
const routes = Object.keys(paths).map((route) => {
|
||||
const path = route
|
||||
// find & replace matching non mobile routes with mobile routes
|
||||
Object.keys(paths).forEach((path) => {
|
||||
const mobilePath = path.replace(/\.jsx$/, ".mobile.jsx").replace(/\.tsx$/, ".mobile.tsx")
|
||||
|
||||
if (paths[mobilePath]) {
|
||||
delete paths[path]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return paths
|
||||
}
|
||||
|
||||
const generateRoutes = () => {
|
||||
let paths = getPagePaths()
|
||||
|
||||
return Object.keys(paths).map((route) => {
|
||||
let path = route
|
||||
.replace(/\/src\/pages|index|\.jsx$/g, "")
|
||||
.replace(/\/src\/pages|index|\.tsx$/g, "")
|
||||
.replace(/\[\.{3}.+\]/, "*")
|
||||
.replace(/\[(.+)\]/, ":$1")
|
||||
|
||||
return {
|
||||
path,
|
||||
element: paths[route]
|
||||
}
|
||||
})
|
||||
|
||||
const mobileRoutes = Object.keys(pathsMobile).map((route) => {
|
||||
const path = route
|
||||
.replace(/\/src\/pages|index|\.mobile|\.jsx$/g, "")
|
||||
.replace(/\/src\/pages|index|\.mobile|\.tsx$/g, "")
|
||||
.replace(/\[\.{3}.+\]/, "*")
|
||||
.replace(/\[(.+)\]/, ":$1")
|
||||
|
||||
path = path.replace(/\[\.{3}.+\]/, "*").replace(/\[(.+)\]/, ":$1")
|
||||
|
||||
return {
|
||||
path,
|
||||
element: pathsMobile[route]
|
||||
element: paths[route],
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function generatePageElementWrapper(route, element, bindProps) {
|
||||
return React.createElement((props) => {
|
||||
@ -101,12 +110,6 @@ function generatePageElementWrapper(route, element, bindProps) {
|
||||
app.layout.set(routeDeclaration.useLayout)
|
||||
}
|
||||
|
||||
// if (routeDeclaration.useHeader === true) {
|
||||
// app.layout.header?.toggle(true)
|
||||
// } else {
|
||||
// app.layout.header?.toggle(false)
|
||||
// }
|
||||
|
||||
if (typeof routeDeclaration.useTitle !== "undefined") {
|
||||
if (typeof routeDeclaration.useTitle === "function") {
|
||||
routeDeclaration.useTitle = routeDeclaration.useTitle(route, params)
|
||||
@ -138,7 +141,11 @@ function generatePageElementWrapper(route, element, bindProps) {
|
||||
})
|
||||
}
|
||||
|
||||
export const PageRender = React.memo((props) => {
|
||||
const NavigationController = (props) => {
|
||||
if (!app.location) {
|
||||
app.location = Object()
|
||||
}
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
async function setLocation(to, state = {}) {
|
||||
@ -191,17 +198,27 @@ export const PageRender = React.memo((props) => {
|
||||
}
|
||||
}, [])
|
||||
|
||||
return props.children
|
||||
}
|
||||
|
||||
export const InternalRouter = (props) => {
|
||||
return <BrowserRouter>
|
||||
<NavigationController>
|
||||
{
|
||||
props.children
|
||||
}
|
||||
</NavigationController>
|
||||
</BrowserRouter>
|
||||
}
|
||||
|
||||
export const PageRender = React.memo((props) => {
|
||||
let routes = generateRoutes()
|
||||
|
||||
console.log(routes)
|
||||
|
||||
return <Routes>
|
||||
{
|
||||
routes.map((route, index) => {
|
||||
if (app.isMobile) {
|
||||
const mobileRoute = mobileRoutes.find((r) => r.path === route.path)
|
||||
|
||||
if (mobileRoute) {
|
||||
route = mobileRoute
|
||||
}
|
||||
}
|
||||
|
||||
return <Route
|
||||
key={index}
|
||||
path={route.path}
|
||||
|
Loading…
x
Reference in New Issue
Block a user