Skip to content

X
xiaomai-cloud-class-web
Commit 071b98f7 by zhangleyuan
Options

feat:调整路由模块

parent 77caae47
Showing with 67 additions and 175 deletions
package.json
...@@ -61,6 +61,7 @@ ...@@ -61,6 +61,7 @@
"postcss-safe-parser": "4.0.1", "postcss-safe-parser": "4.0.1",
"react": "^16.13.1", "react": "^16.13.1",
"react-app-polyfill": "^1.0.6", "react-app-polyfill": "^1.0.6",
"react-async-component": "^2.0.0",
"react-dev-utils": "^10.2.1", "react-dev-utils": "^10.2.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
......
src/App.tsx deleted 100644 → 0
import React from 'react';
import { Route } from 'react-router-dom';
import { Layout,ConfigProvider } from 'antd';
import { RouteConfig } from '@/routes/interface';
import Header from './modules/root/Header'
import Main from './modules/root/Main'
import Menu from './modules/root/Menu'
import zhCN from 'antd/es/locale/zh_CN'
const { Content } = Layout;
class App extends React.Component {
render() {
return (
<div id="home">
<Header/>
<ConfigProvider locale={zhCN}>
<Main/>
</ConfigProvider>
<Menu/>
</div>
)
}
}
export default App;
\ No newline at end of file
src/index.tsx
...@@ -13,8 +13,7 @@ import { ConfigProvider } from 'antd'; ...@@ -13,8 +13,7 @@ import { ConfigProvider } from 'antd';
import { createHashHistory } from 'history'; import { createHashHistory } from 'history';
import zh_CN from 'antd/es/locale/zh_CN'; import zh_CN from 'antd/es/locale/zh_CN';
import _ from 'underscore'; import _ from 'underscore';
import { RootRouter } from './routes/index';
import 'antd/dist/antd.less'; import 'antd/dist/antd.less';
import '@/common/less/index.less'; import '@/common/less/index.less';
...@@ -41,13 +40,9 @@ window.RCHistory = _.extend({}, history, { ...@@ -41,13 +40,9 @@ window.RCHistory = _.extend({}, history, {
} }
}); });
export async function mount() { export async function mount() {
ReactDOM.render(( ReactDOM.render(
<HashRouter {...history} > <RootRouter/>,
<ConfigProvider locale={zh_CN}> document.getElementById('root'));
<App/>
</ConfigProvider>
</HashRouter>
), document.getElementById('root'));
} }
mount() mount()
\ No newline at end of file
src/modules/class-book/index.jsx deleted 100644 → 0
import React from 'react';
class PrepareLessonPage extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
return (
<div className="prepare-lesson-page page">
<div className="content-header">资料云盘</div>
<div className="box content-body">
</div>
</div>
)
}
}
export default PrepareLessonPage;
\ No newline at end of file
src/modules/root/Main.jsx
import React from 'react' import React from 'react'
import './Main.less'; import './Main.less';
import Bus from "@/core/bus"; import Bus from "@/core/bus";
import { MainRoutes } from '@/routes';
class Main extends React.Component { class Main extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
...@@ -10,6 +10,7 @@ class Main extends React.Component { ...@@ -10,6 +10,7 @@ class Main extends React.Component {
} }
} }
componentDidMount() { componentDidMount() {
console.log("MainRoutes",MainRoutes);
Bus.bind("menuTypeChange", (menuType) => { Bus.bind("menuTypeChange", (menuType) => {
this.setState({ menuType }) this.setState({ menuType })
}); });
...@@ -21,7 +22,7 @@ class Main extends React.Component { ...@@ -21,7 +22,7 @@ class Main extends React.Component {
className={this.state.menuType ? `right-container has-nav ${hasBanner ? 'has_banner' : ''}` : `right-container has-nav right-container-vertical ${hasBanner ? 'has_banner' : ''}`} className={this.state.menuType ? `right-container has-nav ${hasBanner ? 'has_banner' : ''}` : `right-container has-nav right-container-vertical ${hasBanner ? 'has_banner' : ''}`}
id="rightContainer" id="rightContainer"
> >
我是内容区 <MainRoutes/>
</div> </div>
) )
} }
......
src/modules/root/Menu.jsx
...@@ -70,7 +70,7 @@ class Menus extends React.Component { ...@@ -70,7 +70,7 @@ class Menus extends React.Component {
)} )}
</Menu.Item> </Menu.Item>
<SubMenu <SubMenu
key="2" key="3"
title={ title={
<span> <span>
<Icon type="mail" /> <Icon type="mail" />
......
src/modules/test/index.jsx
...@@ -9,7 +9,6 @@ class testPage extends React.Component { ...@@ -9,7 +9,6 @@ class testPage extends React.Component {
render() { render() {
return ( return (
<div className="prepare-lesson-page page"> <div className="prepare-lesson-page page">
<div className="content-header">测试</div> <div className="content-header">测试</div>
......
src/routes/config/cloudClass.tsx → src/routes/config/mainRoutes.tsx
...@@ -5,24 +5,13 @@ ...@@ -5,24 +5,13 @@
* @LastEditTime: 2020-08-27 10:07:47 * @LastEditTime: 2020-08-27 10:07:47
* @Description: 内容线路由配置 * @Description: 内容线路由配置
*/ */
import { MenuConfig } from '@/routes/interface';
import VideoCourse from '@/modules/video-course';
import ClassBook from '@/modules/class-book';
import TestPage from '@/modules/test'; import TestPage from '@/modules/test';
const mainRoutes = [
const CloudClassConfig: MenuConfig = {
key: 'cloudClass',
name: '云课堂',
routes: [
{ {
key: 'test', path: '/home',
name: '页面测试', component: TestPage,
path: '/cloudclass/test', name: '首页'
component: TestPage
}, },
] ]
};
export default CloudClassConfig; export default mainRoutes;
\ No newline at end of file \ No newline at end of file
src/routes/index.tsx
...@@ -5,12 +5,14 @@ ...@@ -5,12 +5,14 @@
* @LastEditTime: 2020-08-13 11:23:36 * @LastEditTime: 2020-08-13 11:23:36
* @Description: * @Description:
*/ */
import CloudClass from './config/cloudClass'; import mainRoutes from './config/mainRoutes';
import React from 'react'
import {Redirect,Router, Route ,Switch} from 'react-router-dom'; import { Redirect,HashRouter as Router,Route ,Switch} from 'react-router-dom';
import { createHashHistory } from 'history'; import { createHashHistory } from 'history';
import App from '../modules/root/App'; import App from '../modules/root/App';
import Login from '../modules/root/Login';
import _ from 'underscore'; import _ from 'underscore';
import { asyncComponent } from 'react-async-component'
const history = createHashHistory(); const history = createHashHistory();
window.RCHistory = _.extend({}, history, { window.RCHistory = _.extend({}, history, {
push: (obj: any) => { push: (obj: any) => {
...@@ -28,61 +30,51 @@ window.RCHistory = _.extend({}, history, { ...@@ -28,61 +30,51 @@ window.RCHistory = _.extend({}, history, {
history.replace(obj) history.replace(obj)
} }
}); });
const cache:any = {
path: '',
component: null
}
function dynamic (component:any) {
const resolveComponent = component
return asyncComponent({
resolve: () => {
const ts = resolveComponent()
return ts
},
})
}
export const RootRouter = () => { export const RootRouter = () => {
return ( return (
// <Router {...history}> <Router {...history}>
// <Switch> <Switch>
// {/* <Route key="1" exact path="/login" render={() => <Login />} /> <Route key="1" exact path="/login" render={() => <Login />} />
// <Route key="6" path="/" render={() => <App dispatch={dispatch} state={state} />} /> */} <Route key="2" path="/" render={() => <App />} />
// </Switch> </Switch>
// </Router> </Router>
)
}
export const MainRoutes = () => {
console.log("mainRoutes")
return (
<Switch>
{
_.map(mainRoutes, ({
path,
component,
}, key) => {
return <Route
key={key}
path={path}
render={() => {
const Component = component;
return <Component />
}}
/>
})
}
</Switch>
) )
} }
\ No newline at end of file
// export const MainRoutes = () => {
// return (
// <Switch>
// {
// _.map(renderRoutes, ({
// path,
// version,
// component,
// container,
// isMicroApp,
// }, key) => {
// if (isMicroApp) {
// return <Route
// key={key}
// path={path}
// render={() => {
// return <div id={container} />
// }}
// />
// }
// if (!version) {
// return <Route
// key={key}
// path={path}
// render={() => {
// const Component = dynamic({ path, component })
// cache[path] = Component
// return <Component />
// }}
// />
// } else if ((version === '5.0' && window.NewVersion) || (version !== '5.0' && !window.NewVersion)) {
// return <Route
// key={key}
// path={path}
// render={() => {
// const Component = dynamic({ path, component })
// cache[path] = Component
// return <Component />
// }}
// />
// }
// })
// }
// <Route key="-1" exact path='/' render={() => (<Redirect to='/home' />)} />
// </Switch>
// )
// }
\ No newline at end of file
src/routes/interface.ts deleted 100644 → 0
/*
* @Author: 吴文洁
* @Date: 2020-04-28 18:10:07
* @LastEditors: 吴文洁
* @LastEditTime: 2020-08-13 10:59:08
* @Description:
*/
/** 路由配置，最终解析后转给<Route>组件 */
export interface RouteConfig {
/** 标题，用于route组件和kio的description */
name?: string;
/** 子菜单key */
key?: string;
/** 子菜单路径 */
path?: string;
component?: React.ComponentType<any>;
// 是否精确匹配
exact?: boolean;
}
/** 左侧的菜单配置 */
export interface MenuConfig {
// 菜单名称
name: string;
// 菜单key
key: string;
// 菜单对应的路由
path?: string;
// 子路由
routes?: RouteConfig[];
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment