Task: Add router and routes config and authority route and add types to be router

This commit is contained in:
Sambo Chea 2021-06-12 17:07:54 +07:00
parent 4c0fe442cd
commit 371b4fad15
8 changed files with 82 additions and 6 deletions

View File

@ -1,6 +1,6 @@
{ {
"trailingComma": "es5", "trailingComma": "es5",
"tabWidth": 2, "tabWidth": 4,
"semi": false, "semi": false,
"singleQuote": true "singleQuote": true
} }

View File

@ -51,6 +51,7 @@
"@types/node": "^12.0.0", "@types/node": "^12.0.0",
"@types/react": "^17.0.0", "@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0", "@types/react-dom": "^17.0.0",
"@types/react-router-dom": "^5.1.7",
"craco-less": "^1.17.1", "craco-less": "^1.17.1",
"prettier": "^2.3.1", "prettier": "^2.3.1",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",

View File

@ -1,11 +1,10 @@
import React from 'react' import React from 'react'
import RouterView from '../routes'
import './App.css' import './App.css'
const App = () => { const App = () => {
return ( return (
<div className="App"> <RouterView />
<h1>CUBETIQ</h1>
</div>
) )
} }

3
src/config/index.ts Normal file
View File

@ -0,0 +1,3 @@
export const AppConfig = {
APP_NAME: process.env.REACT_APP_NAME
}

View File

@ -1,7 +1,26 @@
import React from 'react' import React from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import { routes } from './routes'
const RouterView = () => { const RouterView = () => {
return <>Router</> return (
<Router>
<Switch>
{routes.map((route) => {
return (
<Route
key={route.key}
exact={route.exact}
component={route.component}
children={route.children}
location={route.location}
path={route.path}
/>
)
})}
</Switch>
</Router>
)
} }
export default RouterView export default RouterView

View File

@ -1 +0,0 @@
export const routes: Array<any> = []

49
src/routes/routes.tsx Normal file
View File

@ -0,0 +1,49 @@
import { RouteProps } from 'react-router-dom'
import About from '../pages/About'
import Home from '../pages/Home'
import RouteTypes from './types'
interface Authority {
authority?: string | undefined
strict?: boolean | undefined
with?: Authority | undefined
}
interface AuthorityProps {
authorities?: Authority | string[] | string | undefined
strictAuthority?: boolean | undefined
}
interface CustomRouteProps extends RouteProps, AuthorityProps {
key: string
}
export interface MenuProps {
icon: any
label?: string | undefined
}
export interface SideMenuRouteProps extends CustomRouteProps, MenuProps {}
export interface SideSubMenuProps extends MenuProps {
key?: string | undefined
subMenus: SideSubMenuProps[]
}
const routes: CustomRouteProps[] = [
{
key: 'home',
exact: true,
path: RouteTypes.HOME,
component: () => <Home />,
},
{
key: 'about',
path: RouteTypes.ABOUT,
component: () => <About />,
},
]
const menus: (SideMenuRouteProps | SideSubMenuProps)[] = []
export { routes, menus }

6
src/routes/types.ts Normal file
View File

@ -0,0 +1,6 @@
const RouteTypes = {
HOME: "/",
ABOUT: "/about",
}
export default RouteTypes