aldehyde 0.2.19 → 0.2.21

package/src/aldehyde/module/dtmpl-edit-card.tsx

@@ -14,11 +14,11 @@ interface DtmplEditCardProps extends DtmplBaseProps {
 }
 
 interface DtmplEditCardState {
-    id:string,
-    dtmplConfig: DtmplConfig,
-    loading: boolean;
-    serial:number,
-    dtmplData:DtmplData,
+    id?:string,
+    dtmplConfig?: DtmplConfig,
+    loading?: boolean;
+    serial?:number,
+    dtmplData?:DtmplData,
 }
 
 export default class DtmplEditCard extends React.PureComponent<DtmplEditCardProps, DtmplEditCardState> {
@@ -145,10 +145,10 @@ export default class DtmplEditCard extends React.PureComponent<DtmplEditCardProp
     getFooter = () => {
         const {dtmplData,serial}=this.state;
         const footerButtons = [];
-        footerButtons.unshift(<Popconfirm key="ok" placement="topLeft" title={"确定要保存修改吗?"} onConfirm={() =>this.doSubmit()} okText="确定" cancelText="取消">
-            <Button  type={'primary'} >
+        footerButtons.unshift(
+            <Button  onClick={() =>this.doSubmit()} type={'primary'} >
             保 存
-        </Button></Popconfirm>)
+        </Button>)
         const {dtmplConfig} = this.state;
         //处理action
         if (dtmplConfig) {

package/src/aldehyde/module/dtmpl-edit-page.tsx

@@ -20,11 +20,11 @@ interface ModalEditorProps extends DtmplBaseProps {
 }
 
 interface ModalEditorState {
-    id:string,
-    dtmplConfig: DtmplConfig,
-    loading: boolean;
-    serial:number,
-    dtmplData:DtmplData,
+    id?:string,
+    dtmplConfig?: DtmplConfig,
+    loading?: boolean;
+    serial?:number,
+    dtmplData?:DtmplData,
 }
 
 export default class DtmplEditPage extends React.PureComponent<ModalEditorProps, ModalEditorState> {
@@ -167,10 +167,10 @@ export default class DtmplEditPage extends React.PureComponent<ModalEditorProps,
         const {onCancel} = this.props
         const {dtmplData,serial}=this.state;
         const footerButtons = [];
-        footerButtons.unshift(<Popconfirm key="ok" placement="topLeft" title={"确定要保存修改吗?"} onConfirm={() =>this.doSubmit()} okText="确定" cancelText="取消">
-            <Button  type={'primary'} >
+        footerButtons.unshift(
+            <Button  type={'primary'}  onClick={() =>this.doSubmit()}>
             保 存
-        </Button></Popconfirm>)
+        </Button>)
         const {dtmplConfig} = this.state;
         //处理action
         if (dtmplConfig) {

package/src/aldehyde/module/dtmpl-editor.tsx

@@ -13,11 +13,11 @@ interface ModalEditorProps extends DtmplBaseProps {
 }
 
 interface ModalEditorState {
-    id:string,
-    dtmplConfig: DtmplConfig,
-    loading: boolean;
-    serial:number,
-    dtmplData:DtmplData,
+    id?:string,
+    dtmplConfig?: DtmplConfig,
+    loading?: boolean;
+    serial?:number,
+    dtmplData?:DtmplData,
 }
 
 export default class DtmplEditPage extends React.PureComponent<ModalEditorProps, ModalEditorState> {

package/src/aldehyde/module/dtmpl-view-card.tsx

@@ -11,7 +11,7 @@ export interface DtmplViewCardProps  {
 };
 
 export interface DtmplViewCardState  {
-    showDtmplEdit:boolean;
+    showDtmplEdit?:boolean;
 };
 
 class DtmplViewCard extends React.PureComponent<DtmplViewCardProps, DtmplViewCardState> {

package/src/aldehyde/module/ltmpl-table.tsx

@@ -26,21 +26,25 @@ export interface LtmplTableProps {
 };
 
 export interface LtmplTableState {
-    ltmplConfigRes: LtmplConfigRes;
-    criteriaData: object;
-    showDtmplView: boolean;
-    selectedCode: string;
-    showDtmplEdit: boolean;
-    showDraw: boolean;
-    showDtmplCustomEdit: boolean;
-    ractionId: string,
-    collapse: boolean,
+    ltmplConfigRes?: LtmplConfigRes;
+    pageNo?:number,
+    pageSize?:number,
+    criteriaData?: object;
+    showDtmplView?: boolean;
+    selectedCode?: string;
+    showDtmplEdit?: boolean;
+    showDraw?: boolean;
+    showDtmplCustomEdit?: boolean;
+    ractionId?: string,
+    collapse?: boolean,
 };
 
 class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
 
     state = {
         ltmplConfigRes: undefined,
+        pageNo:undefined,
+        pageSize:undefined,
         criteriaData: undefined,
         showDtmplView: false,
         showDtmplEdit: false,
@@ -179,6 +183,13 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
         });
     }
 
+    onChangePage=(pageNo,pageSize)=>{
+        this.setState({
+            pageNo,pageSize
+        })
+
+    }
+
     handleDtmplEdit = (code: string) => {
         this.doSearch(this.state.criteriaData);
         this.setState({
@@ -188,7 +199,7 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
 
 
     render() {
-        const {ltmplConfigRes, criteriaData, showDtmplView, selectedCode, showDtmplEdit, showDtmplCustomEdit, ractionId, showDraw, collapse} = this.state;
+        const {ltmplConfigRes, criteriaData,pageSize,pageNo, showDtmplView, selectedCode, showDtmplEdit, showDtmplCustomEdit, ractionId, showDraw, collapse} = this.state;
         const {sourceId, mainCode, showView, doSearch, doRAction, funcMode, title, collapsible, initCollapse} = this.props;
 
         if (!ltmplConfigRes) {
@@ -196,7 +207,7 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
         } else {
             const {buttons,customEditPagePath} = ltmplConfigRes.ltmplConfig
             return <>
-                <ActTable collapsible={collapsible} initCollapse={initCollapse && collapse} title={title}
+                <ActTable pageSize={pageSize} pageNo={pageNo} onChangePage={this.onChangePage}  collapsible={collapsible} initCollapse={initCollapse && collapse} title={title}
                           funcMode={funcMode} mainCode={mainCode} showView={showView ? showView : this.showView}
                           doRAction={doRAction ? doRAction : this.doRAction}
                           doSearch={doSearch ? doSearch : this.doSearch} doEdit={this.doEdit} doCreate={this.doCreate}

package/src/aldehyde/routable/dtmpl-route.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import {Button, Card, Form as AntdForm, Empty} from 'antd';
+import { Empty} from 'antd';
 import  {RouterCompProps} from '../tmpl/interface';
-import Units from "../units";
 import DtmplEdit from "../detail/edit/dtmpl-edit";
 import ActDtmplView from '../detail/view/act-dtmpl-view';
 import HcserviceV3 from "../tmpl/hcservice-v3";
+import withRouter from "./withroute";
 
 
 export interface DtmplRouteProps extends RouterCompProps {
@@ -12,8 +12,8 @@ export interface DtmplRouteProps extends RouterCompProps {
 };
 
 export interface DtmplRoutePropsStat {
-    codeSource:'new'|'listop'|'listop-new'|undefined,
-    queriedCode:string,
+    codeSource?:'new'|'listop'|'listop-new'|undefined,
+    queriedCode?:string,
 };
 
 class DtmplRoute extends React.PureComponent<DtmplRouteProps, DtmplRoutePropsStat> {
@@ -27,8 +27,8 @@ class DtmplRoute extends React.PureComponent<DtmplRouteProps, DtmplRoutePropsSta
         queriedCode:undefined,
     }
     async componentDidMount() {
-        const {location,match}=this.props;
-        const {sourceId,} = match.params;
+        const {params}=this.props;
+        const {sourceId,} = params;
         let codeSource:'new'|'listop'|'listop-new'|undefined=this.getCodeSource();
         let queriedCode=undefined;
         if(codeSource){
@@ -56,21 +56,21 @@ class DtmplRoute extends React.PureComponent<DtmplRouteProps, DtmplRoutePropsSta
         return queriedCode;
     }
     getMenuId=()=>{
-        const {location} = this.props;
+        const {searchParams} = this.props;
         //console.log("this.props.match.params",this.props);
-        var searchParams = new URLSearchParams( location.search);
+       // var searchParams = new URLSearchParams( location.search);
         let menuId = searchParams.get('menuId');
         return menuId;
     }
 
     getCodeSource=()=>{
-        const {location}=this.props;
-        let params=Units.transQueryStrToParams(location.search);
-        if('codeSource' in params){
+        const {params}=this.props;
+       // let params=Units.transQueryStrToParams(location.search);
+       //  if('codeSource' in params){
             return params['codeSource'];
-        }else{
-            return undefined;
-        }
+        // }else{
+        //     return undefined;
+        // }
     }
 
     goBackToLtmpl=()=>{
@@ -83,11 +83,11 @@ class DtmplRoute extends React.PureComponent<DtmplRouteProps, DtmplRoutePropsSta
         //     url=url+`&mainCode=${mainCode}`;
         // }
         //this.props.history.push(url);
-       this.props.history.goBack();
+       this.props.navigate(-1);
     }
 
     goDtmpl=(code:string)=>{
-        const { sourceId,} = this.props.match.params;
+        const { sourceId,} = this.props.params;
         const {basePath}=this.props;
         let url=`${basePath}/${sourceId}/detail-edit?menuId=${this.getMenuId()}`;
         if(code){
@@ -97,41 +97,39 @@ class DtmplRoute extends React.PureComponent<DtmplRouteProps, DtmplRoutePropsSta
         if(mainCode){
             url=url+`&mainCode=${mainCode}`;
         }
-        this.props.history.push(url);
+        this.props.navigate(url);
     }
 
     getMainCode=()=>{
-        const {location}=this.props;
-
-        let params=Units.transQueryStrToParams(location.search);
-        if('mainCode' in params){
+        const {params}=this.props;
+        //if('mainCode' in params){
             return params['mainCode'];
-        }else{
-            return undefined;
-        }
+        // }else{
+        //     return undefined;
+        // }
     }
 
     getCode= ()=>{
         const {codeSource,queriedCode}=this.state;
-        const {location}=this.props;
+        const {searchParams}=this.props;
         //let code;
         if(codeSource){
             return queriedCode;
         }else{
-            let params=Units.transQueryStrToParams(location.search);
-            return params['code'];
+           // let params=Units.transQueryStrToParams(location.search);
+            return searchParams.get('code');
         }
     }
 
     getMode=()=>{
-        const {location}=this.props;
-        let params=Units.transQueryStrToParams(location.search);
-        return this.getCode()?params['mode']:"add";
+        const {searchParams}=this.props;
+       // let params=Units.transQueryStrToParams(location.search);
+        return this.getCode()?searchParams.get('mode'):"add";
     }
 
     render() {
-        const {location,match}=this.props;
-        const {sourceId,} = match.params;
+        const {location,params}=this.props;
+        const {sourceId,} = params;
         const {codeSource}=this.state;
         if(!location){
             return <></>;
@@ -140,7 +138,7 @@ class DtmplRoute extends React.PureComponent<DtmplRouteProps, DtmplRoutePropsSta
         if(code && code=='bad-code'){
             return <Empty />
         }
-        let params=Units.transQueryStrToParams(location.search);
+       // let params=Units.transQueryStrToParams(location.search);
         let versionId=params['versionId'];
         if(location.pathname.endsWith("detail-view")){
             return (
@@ -155,5 +153,5 @@ class DtmplRoute extends React.PureComponent<DtmplRouteProps, DtmplRoutePropsSta
     }
 }
 
-export default DtmplRoute;
+export default withRouter(DtmplRoute);
 

package/src/aldehyde/routable/import-route.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {RouterCompProps} from '../tmpl/interface';
 import ExcelImport from '../import/excel-import'
+import withRouter from "./withroute";
 
 export interface ImportRouteProps extends RouterCompProps {
 
@@ -19,10 +20,10 @@ class ExcelImportRoute extends React.PureComponent<ImportRouteProps, ImportRoute
 
 
     render() {
-        const {location, match, history} = this.props;
-        const { sourceId} = match.params;
+        const { params, } = this.props;
+        const { sourceId} = params;
        return <ExcelImport  sourceId={sourceId}></ExcelImport>
     }
 }
-export default ExcelImportRoute;
+export default withRouter(ExcelImportRoute);
 

package/src/aldehyde/routable/ltmpl-route.tsx

@@ -4,23 +4,25 @@ import Units from "../units";
 import ActTable from '../table/act-table'
 // import StatActTable from '../table/stat-act-table'
 import HCDataSource from "../tmpl/hc-data-source";
-
+import withRouter from "../routable/withroute";
 export interface LtmplRouteProps extends RouterCompProps {
 
 };
 
 export interface LtmplRouteState {
-
-    ltmplConfigRes: LtmplConfigRes,
+    ltmplConfigRes?: LtmplConfigRes,
+    pageNo?: number,
+    pageSize?: number,
 };
 
 class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
-    static  defaultProps={
-        basePath:"",
+    static defaultProps = {
+        basePath: "",
     }
-
     state = {
         ltmplConfigRes: undefined,
+        pageNo: undefined,
+        pageSize: undefined,
     }
 
     async componentDidMount() {
@@ -28,36 +30,32 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
     }
 
     onRoute = (path) => {
-        this.props.history.push(path);
+        this.props.navigate(path);
     }
 
-    getMenuId=()=>{
-        const {location} = this.props;
-        //console.log("this.props.match.params",this.props);
-        var searchParams = new URLSearchParams( location.search);
+    getMenuId = () => {
+        const {searchParams} = this.props;
         let menuId = searchParams.get('menuId');
         return menuId;
     }
 
     loadData = async () => {
-        const {location} = this.props;
-        const { sourceId} = this.props.match.params;
-        let criteriaData = Units.transQueryStrToParams(this.props.location.search);
-        //console.log('acttable location search:', this.props.location.search);
-        let ltmplConfigRes = await HCDataSource.requestLtmplConfig(sourceId);
+        const {params} = this.props;
+        const {sourceId} = params;
+        let ltmplConfigRes:LtmplConfigRes = await HCDataSource.requestLtmplConfig(sourceId);
         this.setState({
-            ltmplConfigRes,
+            ltmplConfigRes:ltmplConfigRes,
         })
     }
 
     async componentDidUpdate(prevProps) {
-        const {location} = this.props;
-        const { sourceId} = this.props.match.params;
-        let { sourceId: preSourceId} = prevProps.match.params;
+        const {location,params} = this.props;
+        const {sourceId} = params;
+        let {sourceId: preSourceId} = prevProps.params;
         let {location: preLocation} = prevProps;
 
-        if ( !sourceId ||
-            ( !preSourceId && this.state.ltmplConfigRes)
+        if (!sourceId ||
+            (!preSourceId && this.state.ltmplConfigRes)
             || (location.pathname == preLocation.pathname && location.search == preLocation.search)
         ) {
             return;
@@ -65,26 +63,26 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
         this.loadData();
     }
 
-    showView = (code: string,toCustomPage:boolean=false) => {
-        const {basePath}=this.props;
-        const { sourceId} = this.props.match.params;
+    showView = (code: string, toCustomPage: boolean = false) => {
+        const {basePath} = this.props;
+        const {sourceId} = this.props.params;
         const {ltmplConfigRes} = this.state;
         let path = `${basePath}/${sourceId}/detail-view?code=${code}&menuId=${this.getMenuId()}`;
-        if(toCustomPage && ltmplConfigRes.ltmplConfig.customViewPagePath){
-            path=`${basePath}${ltmplConfigRes.ltmplConfig.customViewPagePath}?menuId=${this.getMenuId()}&sourceId=${sourceId}`;
+        if (toCustomPage && ltmplConfigRes.ltmplConfig.customViewPagePath) {
+            path = `${basePath}${ltmplConfigRes.ltmplConfig.customViewPagePath}?menuId=${this.getMenuId()}&sourceId=${sourceId}`;
         }
         this.onRoute(path);
     }
 
-    doEdit = (code: string,mode:AddOrUpdate,toCustomPage:boolean=false) => {
-        const {basePath}=this.props;
-        const { sourceId} = this.props.match.params;
+    doEdit = (code: string, mode: AddOrUpdate, toCustomPage: boolean = false) => {
+        const {basePath} = this.props;
+        const {sourceId} = this.props.params;
         const {ltmplConfigRes} = this.state;
         let mainCode = this.getMainCode();
 
         let path = `${basePath}/${sourceId}/detail-edit?code=${code}&menuId=${this.getMenuId()}&mode=${mode}`;
-        if(toCustomPage && ltmplConfigRes.ltmplConfig.customEditPagePath){
-            path=`${basePath}/page-${sourceId}${ltmplConfigRes.ltmplConfig.customEditPagePath}?code=${code}&menuId=${this.getMenuId()}`;
+        if (toCustomPage && ltmplConfigRes.ltmplConfig.customEditPagePath) {
+            path = `${basePath}/page/${sourceId}${ltmplConfigRes.ltmplConfig.customEditPagePath}?code=${code}&menuId=${this.getMenuId()}`;
         }
         if (mainCode) {
             path = path + `&mainCode=${mainCode}`;
@@ -93,24 +91,24 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
     }
 
     getMainCode = () => {
-        const {location} = this.props;
-        let search = location.search;
+        const {searchParams} = this.props;
         let mainCode = undefined;
-        let criteriaData = Units.transQueryStrToParams(search);
-        if (search.indexOf('mainCode') > 0) {
-            criteriaData = Units.transQueryStrToParams(search);
-            mainCode = criteriaData['mainCode'];
+       // let criteriaData = Units.transQueryStrToParams(search);
+        let mcode=searchParams.get('mainCode');
+        if (mcode) {
+            // criteriaData = Units.transQueryStrToParams(search);
+            mainCode = mcode;
         }
         return mainCode;
     }
 
-    doCreate = (toCustomPage:boolean=false) => {
-        const {basePath}=this.props;
-        const { sourceId} = this.props.match.params;
+    doCreate = (toCustomPage: boolean = false) => {
+        const {basePath} = this.props;
+        const {sourceId} = this.props.params;
         const {ltmplConfigRes} = this.state;
         let path = `${basePath}/${sourceId}/detail-edit?menuId=${this.getMenuId()}`;
-        if(toCustomPage && ltmplConfigRes.ltmplConfig.customEditPagePath){
-            path=`${basePath}/page-${sourceId}${ltmplConfigRes.ltmplConfig.customEditPagePath}?menuId=${this.getMenuId()}`;
+        if (toCustomPage && ltmplConfigRes.ltmplConfig.customEditPagePath) {
+            path = `${basePath}/page/${sourceId}${ltmplConfigRes.ltmplConfig.customEditPagePath}?menuId=${this.getMenuId()}`;
         }
         let mainCode = this.getMainCode();
         if (mainCode) {
@@ -119,60 +117,87 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
         this.onRoute(path);
     }
 
-    doRAction = (ractionId:string,mainCode:String) => {
-        const {basePath}=this.props;
+    doRAction = (ractionId: string, mainCode: String) => {
+        const {basePath} = this.props;
         let path = `${basePath}/${ractionId}/act-table?mainCode=${mainCode}&menuId=${this.getMenuId()}`;
         this.onRoute(path);
     }
 
     doSearch = (params_) => {
-        const {basePath}=this.props;
-        const { sourceId} = this.props.match.params;
-        //const oldfliter = history.location.search.slice(1);
+        const {basePath} = this.props;
+        const {sourceId} = this.props.params;
+        let params = {...params_}
+        params['sourceId'] = sourceId;
+        const newfliter = Units.transQueryParamsToStr(params);
+        this.props.navigate(`${basePath}/${sourceId}/act-table?menuId=${this.getMenuId()}&${newfliter}`,{replace:true})
 
+    }
+    onChangeSearch = (params_) => {
         let params = {...params_}
         //追加过滤条件，hiddenColIds，innerQueryKey
-        let mainCode = this.getMainCode();
-        if (mainCode) {
-            params['mainCode'] = mainCode;
+        const {location,searchParams} = this.props;
+        let mainCode = undefined;
+        let criteriaData=searchParams;
+        let mcode=searchParams.get("mainCode");
+        if (mcode) {
+            params['mainCode'] = mcode;
         }
-        params['sourceId'] = sourceId;
-        const newfliter = Units.transQueryParamsToStr(params);
-       // let flag = true;
-        //if (newfliter && oldfliter != newfliter) { //查询条件更新时
-        this.onRoute(`${basePath}/${sourceId}/act-table?menuId=${this.getMenuId()}&${newfliter}`)
-        // }else{
-        //     params['serial']=Units.getRandomNum(6);
-        // }
-        // else {
-        //     this.loadData(hiddenColIds, hiddenRowCodes, sortedColConfigs);
-        // }
+        const {pageSize,pageNo} = this.state;
+        if(pageSize){
+            params['pageNo'] = pageNo;
+        }
+       if(pageNo){
+           params['pageSize'] = pageSize;
+       }
+
+        this.doSearch(params);
+    }
+
+    onChangePage = (pageNo: number, pageSize: number) => {
+        const {location} = this.props;
+        let search = location.search;
+        let mainCode = undefined;
+        let params = Units.transQueryStrToParams(search);
+        params['pageNo'] = pageNo;
+        params['pageSize'] = pageSize;
+        this.doSearch(params);
+
+        // this.setState({
+        //     pageNo,
+        //         pageSize
+        // })
     }
 
 
     render() {
         const {ltmplConfigRes} = this.state;
-        const {location, match} = this.props;
-        const { sourceId} = match.params;
-        let menuId = undefined;
+        const {location, params} = this.props;
+        const {sourceId} = params;
+        //let menuId = undefined;
         let mainCode = undefined;
+
         let search = location.search;
+        debugger
         let criteriaData = Units.transQueryStrToParams(search);
-        if (search.indexOf('menuId') > 0) {
-            menuId = criteriaData['menuId'];
-            criteriaData['menuId']=undefined;
-        } else  {
-            menuId = sourceId;
-        }
+        // if (search.indexOf('menuId') > 0) {
+        //     menuId = criteriaData['menuId'];
+        //     criteriaData['menuId'] = undefined;
+        // } else {
+        //     menuId = sourceId;
+        // }
+        let pageSize = criteriaData['pageSize'];
+        let pageNo = criteriaData['pageNo'];
+
         if (search.indexOf('mainCode') > 0) {
-            criteriaData = Units.transQueryStrToParams(search);
+            //criteriaData = Units.transQueryStrToParams(search);
             mainCode = criteriaData['mainCode'];
         }
         if (!ltmplConfigRes) {
             return <></>;
         } else {
-            return <ActTable menuId={this.getMenuId()} mainCode={mainCode} showView={this.showView}
-                             doSearch={this.doSearch} doEdit={this.doEdit} doCreate={this.doCreate}
+            return <ActTable pageSize={pageSize} pageNo={pageNo} onChangePage={this.onChangePage}
+                             menuId={this.getMenuId()} mainCode={mainCode} showView={this.showView}
+                             doSearch={this.onChangeSearch} doEdit={this.doEdit} doCreate={this.doCreate}
                              sourceId={sourceId} criteriaData={criteriaData}
                              ltmplConfig={ltmplConfigRes.ltmplConfig}
                              doRAction={this.doRAction}
@@ -182,5 +207,5 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
     }
 }
 
-export default LtmplRoute;
+export default withRouter(LtmplRoute);
 

package/src/aldehyde/routable/withroute.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import {useLocation, useNavigate, useParams,useSearchParams} from "react-router-dom";
+
+const withRouter = Comp => props => {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const params = useParams();
+    const [searchParams,setSearchParams]=useSearchParams();
+    return (
+        <Comp
+            {...props}
+            location={location}
+            navigate={navigate}
+            params={params}
+            searchParams={searchParams}
+        />
+    );
+};
+
+
+export default withRouter;
+