Skip to content

C
CivWeb
Commit 07468e06 authored by 邓晓峰's avatar 邓晓峰
Browse files
Options

fix: 子应用路由卸载

parent 3e7956a9
Hide whitespace changes
Inline Side-by-side
Showing with 153 additions and 79 deletions
config/proxy.js
View file @ 07468e06
/* eslint-disable */
// const proxyURL = process.env.NODE_ENV !== 'production' ? 'http://192.168.10.150:8777' : window.location.origin;
const proxyURL = 'http://127.0.0.1:8666';
const proxyURL = 'http://192.168.10.150:8669';
module.exports = {
assetsRoot: process.env.NODE_ENV !== 'production' ? proxyURL : './',
dev: {
......
package-lock.json
View file @ 07468e06
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ 07468e06
......@@ -122,7 +122,7 @@
"pinyin-match": "^1.1.1",
"promise.prototype.finally": "^3.1.2",
"prop-types": "15.7.2",
"qiankun": "^2.4.28",
"qiankun": "^2.4.6",
"qrcode.react": "^1.0.0",
"react": "16.12.0",
"react-dom": "16.12.0",
......
src/components/GlobalHeader/ExtendRightContent.js
View file @ 07468e06
......@@ -13,7 +13,7 @@ import Avatar from './AvatarDropdown';
import styles from './index.less';
import NoticeIconView from './NoticeIconView';
import classNames from 'classnames';
import { useHistory } from '@wisdom-utils/runtime';
/* eslint-disable */
const orderSvg = () => (
<svg
......@@ -109,7 +109,7 @@ const GlobalHeaderRight = props => {
const [options, setOptions] = useState([]);
const homeRef = useRef(null);
const favitorRef = useRef(null);
const history = useHistory();
const { theme, layout } = props;
let className = styles.right;
......@@ -152,7 +152,8 @@ const GlobalHeaderRight = props => {
};
const handlerFavitor = event => {
setCurrentIndex(1);
// setCurrentIndex(1);
history.push('/commonmenu')
}
const handlerTheme = () => {
......
src/containers/App/index.js
View file @ 07468e06
import React from 'react';
import React, { Suspense } from 'react';
import { Helmet } from 'react-helmet';
import { connect } from 'react-redux';
// import { renderRoutes } from 'react-router-config';
import { RouteWithSubRoutes, renderRoutes} from '../../utils/routes'
import { renderRoutes } from 'react-router-config';
// import { RouteWithSubRoutes, renderRoutes} from '../../utils/routes'
import BootPage from '../../pages/bootpage';
import {
Router,
Switch,
Route,
Redirect
} from '@wisdom-utils/runtime';
import { dyRoutes } from '../../routes/config';
import { Route } from 'react-router-dom';
import routeContext from '@ant-design/pro-layout/lib/RouteContext';
// import { Route } from 'react-router-dom';
const pkg = require('../../../package.json');
const config = require('../../../config/config');
const defaultSetting = config.layout;
const createRoute = routes => {
return (
<Switch>
{
routes.map((route, index) =>
createFixRoute(route, index)
)
}
<Redirect from='/*' to='/' />
</Switch>
);
};
//该组件通过递归的方式，将所有route中带有children路由的父路由进行解构,最终用createBasicRoute函数来渲染
const createFixRoute = (route, index) => {
const { path, component: RouteComponent, routes } = route;
if (routes) {
return (
<Route
key={index}
path={path}
children={props => {
let redirectPath = null;
return <RouteComponent {...props} route={route} routes={route.routes} params={route.params}>
<Switch>
{routes.map((child, index2) => {
const { path: childPath, redirect } = child;
if (redirect){
redirectPath = childPath;
}
return createFixRoute({...child, path: path + childPath}, `${index}-${index2}`);
})}
<Redirect from={`${path}`} to={`${path}${redirectPath || routes[0].path}`} />
</Switch>
</RouteComponent>;
}}
/>
);
} else {
return createBasicRoute(route, index);
}
};
const createBasicRoute = (route, index) => { // 最基础的Router 用法
const { path, component: Component } = route;
return <Route exact key={index} path={path} component={props => {
return <Component {...props} route={route} routes={route.routes} params={route.params}/>;
}} />;
};
function App(props) {
const { routes } = dyRoutes(props.menu);
console.log("routes", routes)
return (
<>
<Helmet
......@@ -38,15 +94,7 @@ function App(props) {
</Helmet>
<Router basename={config.base || pkg.name.toLocaleLowerCase() || ''}>
<Switch>
{renderRoutes(routes, [])}
{/* <Route path="/industry" component={BootPage}></Route> */}
{/* <Redirect to="/notFound" /> */}
{/* {
routes.map((route, key) => (
<RouteWithSubRoutes key={key} {...route} />
))
} */}
{renderRoutes(dyRoutes(props.menu || []).routes)}
</Switch>
</Router>
</>
......
src/layouts/BasicLayout.less
View file @ 07468e06
......@@ -179,10 +179,13 @@
}
.basicLayout-content {
position: relative;
height: calc(100vh - 82px);
margin-top: 82px;
overflow: hidden;
// margin: 24px 24px 0px 24px;
&.hook_web4 {
height: calc(100% - 82px);
margin-top: 98px;
margin-top: 82px;
}
}
.ant-page-header {
......@@ -401,9 +404,12 @@
.ant-page-container {
// padding-top: 48px;
// margin: -24px -24px 0;
margin: -18px 0px 0 0px;
// margin: -18px 0px 0 0px;
margin: 0px;
height: 100%;
// background-color: #fff;
}
.ant-pro-page-container-warp {
background-color: #fff;
}
......@@ -411,8 +417,17 @@
.ant-pro-page-container-children-content {
margin: 0!important;
}
& :global(.ant-pro-page-container-children-content) {
margin: 14px 10px!important
& :global {
.ant-pro-page-container-children-content, .ant-pro-grid-content-children, .ant-pro-grid-content-children>div, .ant-pro-grid-content-children .ant-spin-container {
margin: 0px!important;
height: 100%;
}
// margin: 14px 10px!important
}
& :global(.ant-pro-grid-content) {
height: 100%;
}
.fixedHeader {
......
src/layouts/BasicLayout1.js
View file @ 07468e06
import React, {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
......@@ -19,7 +17,8 @@ import {
Menu,
Tooltip
} from 'antd';
import { RouteWithSubRoutes, renderRoutes } from '../utils/routes';
// import { RouteWithSubRoutes, renderRoutes } from '../utils/routes';
import { renderRoutes } from 'react-router-config';
import { PageContainer } from '@ant-design/pro-layout';
import Icon from '@ant-design/icons';
import { store } from 'microser-data';
......@@ -260,12 +259,13 @@ const BasicLayout = props => {
const [siteAction, setSiteAction] = useState(
() => new Site(props, setSiteLoading),
);
const basename = getBaseName();
const history = useHistory();
let currentRoutes = props.route.routes[props.currentMenuIndex]
useEffect(() => {
const initSelectRoute = findPathByLeafId(
`${props.location.pathname}`,
`${props.location && props.location.pathname || ''}`,
[currentRoutes],
'',
'path',
......@@ -292,7 +292,7 @@ const BasicLayout = props => {
setChildrenRoutes([
{
icon: <HomeIcon/>,
path: props.location.pathname,
path: props.location && props.location.pathname,
name: '首页'
}
])
......@@ -469,7 +469,7 @@ const BasicLayout = props => {
[layoutStyles.collapsed]: collapse
})}>
<div className={layoutStyles['layout-slider-childern']}>
<div className={layoutStyles.sliderMenu} style={{flex: '1 1 0%', overflow: 'hidden auto'}}>
<div className={layoutStyles.sliderMenu} style={{flex: '1 1 0%', overflow: 'hidden'}}>
<ul className="menu" style={{minHeight: '0px', marginBottom: '0px'}}>
<li className={classNames('menu-item')} onClick={handleToggleSystem}>
<Tooltip placement="right" title={collapse ? currentRoutes.name: ''}>
......@@ -542,7 +542,8 @@ const BasicLayout = props => {
<div className={classNames(layoutStyles['basicLayout-content'], {
[layoutStyles['hook_web4']]: location.pathname.startsWith('/civbase/civweb4')
})}>
<div className={layoutStyles['ant-page-container']} style={{paddingTop: '46px'}}>
<div className={layoutStyles['ant-page-container']} style={{paddingTop: '0px'}}>
<div className={layoutStyles['ant-pro-page-container-warp']}>
<div className={layoutStyles['ant-page-header']} style={{position: 'fixed'}}>
<img src={require('../assets/basic/图层 998@2x.png')} style={{width: '100%'}}/>
......@@ -597,6 +598,7 @@ const BasicLayout = props => {
</Tabs>
</div>
{/* <div className='ant-pro-grid-content' style={{width: collapse ? 'calc(100% - 56px)':'calc(100% - 18px)'}}>
<div className="ant-pro-grid-content-children">
<div className={layoutStyles['ant-pro-page-container-children-content']}>
......@@ -612,16 +614,22 @@ const BasicLayout = props => {
</div>
</div>
</div> */}
<PageContainer style={{paddingTop: '48px'}}>
<PageContainer style={{paddingTop: '0px', height: '100%'}}>
{
<div id="micro-container" className="subapp-container">
<Switch>
{props.routes && renderRoutes(props.routes, [])}
</Switch>
renderRoutes(props.route.routes)
}
<div id="micro-container" className="subapp-container">
</div>
}
{props.children}
</div>
</PageContainer>
{/* <PageContainer style={{paddingTop: '48px'}}>
{props.children}
</PageContainer> */}
</div>
</div>
</div>
......
src/layouts/UserLayout.js
View file @ 07468e06
......@@ -42,6 +42,7 @@ const UserLayout = props => {
<div className={styles.container}>
<div className={styles.content}>
{renderRoutes(route.routes)}
{props.children}
</div>
{/* <DefaultFooter links={[]} copyright="Copyright © 熊猫智慧水务 2020 All Rights Reserved 沪ICP备11036640-1"/> */}
</div>
......
src/micro.js
View file @ 07468e06
......@@ -159,9 +159,9 @@ export const initMicroApps = (loader, store) => {
// ) {
// // window.history.pushState({message: '应用服务请求异常，请检查应用配置'}, null, '/civbase/500')
// }
if(event.type === 'error') {
window.history.pushState({message: '应用服务请求异常，请检查应用配置'}, null, '/civbase/404')
}
// if(event.type === 'error') {
// window.history.pushState({message: '应用服务请求异常，请检查应用配置'}, null, '/civbase/404')
// }
});
};
......
src/routes/config.js
View file @ 07468e06
......@@ -9,7 +9,7 @@ import CommonMenu from '../pages/commonMenu';
export const dyRoutes = routes => {
// eslint-disable-next-line no-shadow
const dyRoutes = routes;
const dyRoutes = routes || [];
return {
routes: [
{
......@@ -32,6 +32,11 @@ export const dyRoutes = routes => {
component: BasicLayout,
routes: [
...dyRoutes,
{
path: '/commonmenu',
component: CommonMenu,
name: 'commonmenu'
},
{
path: '/404',
component: dynamic({
......@@ -66,18 +71,7 @@ export const dyRoutes = routes => {
loading: LoadingComponent,
}),
},
{
path: '/commonmenu',
component: CommonMenu,
},
// {
// path: '/commonmenu',
// component: dynamic({
// loader: () =>
// import(/* webpackChunkName: 'p__500' */ '../pages/commonMenu'),
// loading: CommonMenu,
// }),
// },
],
};
};
src/utils/routes.js
View file @ 07468e06
import { transformURL } from './utils';
import {
Route,
Switch
} from '@wisdom-utils/runtime';
import React, { Suspense, Fragment } from 'react';
export const isURL = function(url) {
// eslint-disable-next-line no-useless-escape
return /^(http|https)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/.test(url);
......@@ -145,32 +146,38 @@ export const generFlatRoutes = (widgets, parent, subSystem) => {
export function RouteWithSubRoutes(route) {
return (
<Route path={route.path} render={props => {
return <route.component {...props} route={route} routes={route.routes} params={route.params} />;
}
} />)
};
export function renderRoutes(routes, result = []) {
if(!routes) {
result = [];
}
for(let i = 0; i < routes.length; i++) {
const route = routes[i];
result.push(<RouteWithSubRoutes key={i} {...route}/>)
if(route.routes && Array.isArray(route.routes) && route.routes.length > 0) {
renderRoutes(route.routes);
}
}
// return routes.map((route, key) => {
// if(route.routes && Array.isArray(route.routes) && route.routes.length > 0) {
// renderRoutes(route.routes);
// }
// return <RouteWithSubRoutes key={key} {...route}/>
// });
return result;
<Route path={route.path} render={props => (<route.component {...props} route={route} routes={route.routes} params={route.params}/>)}></Route>
)
}
export function renderRoutes(routes) {
return routes.map((route,index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
render={(props) => { // 利用render 方法处理
if (route.routes){
return (
<>
<route.component {...props} route={route} routes={route.routes} params={route.params}></route.component>
<Switch>
{
route.routes.map((child,i) => (
RouteWithSubRoutes(child)
))
}
{/* <Redirect to={route.routes[0].path}></Redirect> // 子路由找不到，重定向到第一个子路由 */}
</Switch>
</>
)
}else {
return (
<route.component {...props} route={route} routes={route.routes} params={route.params}></route.component>
)
}
}}
/>
))
}
export default generRotes;
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