react遍历Route处理

红太狼 2023-06-27 03:28 11阅读 0赞

# 遍历Route引发的React Route路由失效问题探究 #

route.js

import Account from '../component/auth/admin/list';
    import Role from '../component/auth/role/list';
    import Estatebill from '../component/bill/estate/index';
    import Operabill from '../component/bill/opera/index';
    import Totalbill from '../component/bill/total/index';
    import LandlordC from '../component/contract/landlord/list';
    import Contract from '../component/contract/list';
    import StockholderC from '../component/contract/stockholder/list';
    import DeviceDtu from '../component/deviceDtu/index';
    import DtuLock from '../component/dtuLock/index';
    import ErrorPage from '../component/error/errorPage';
    import Estate from '../component/estate/index';
    import Store from '../component/estate/store/list';
    import Finance from '../component/finance/index';
    import Message from '../component/message/index';
    import Employee from '../component/person/employee/index';
    import Landlord from '../component/person/landlord/index';
    import Stockholder from '../component/person/stockholder/index';
    import FinanceIndex from '../component/system/financeindex';
    import SystemIndex from '../component/system/systemindex';
    import Userbill from '../component/user/bill/index';
    import Users from '../component/user/list';
    export const routeModules = {
        '/app/error': {
            curPath: './component/error/errorPage',
            component: ErrorPage
        },
        '/app/estate': {
            curPath: './component/estate/index',
            component: Estate
        },
        '/app/users': {
            curPath: './component/user/list',
            component: Users
        },
        '/app/finance': {
            curPath: './component/finance/index',
            component: Finance
        },
        '/app/role': {
            curPath: './component/auth/role/list',
            component: Role
        },
        '/app/account': {
            curPath: './component/dtuLock/index',
            component: Account
        },
        '/app/dtuLock': {
            curPath: './component/dtuLock/index',
            component: DtuLock
        },
        '/app/deviceDtu': {
            curPath: './component/deviceDtu/index',
            component: DeviceDtu
        },
        '/app/message': {
            curPath: './component/message/index',
            component: Message
        },
        '/app/stockholderC': {
            curPath: './component/contract/stockholder/list',
            component: StockholderC
        },
        '/app/contract': {
            curPath: './component/contract/list',
            component: Contract
        },
        '/app/landlordC': {
            curPath: './component/contract/landlord/list',
            component: LandlordC
        },
        '/app/systemS': {
            curPath: './component/system/systemindex',
            component: SystemIndex
        },
        '/app/financeS': {
            curPath: './component/system/financeindex',
            component: FinanceIndex
        },
        '/app/employee': {
            curPath: './component/person/employee/index',
            component: Employee
        },
        '/app/stockholder': {
            curPath: './component/person/stockholder/index',
            component: Stockholder
        },
        '/app/landlord': {
            curPath: './component/person/landlord/index',
            component: Landlord
        },
        '/app/store': {
            curPath: './component/estate/store/list',
            component: Store
        },
        '/app/estatebill': {
            curPath: './component/bill/estate/index',
            component: Estatebill
        },
        '/app/operabill': {
            curPath: './component/bill/opera/index',
            component: Operabill
        },
        '/app/totalbill': {
            curPath: './component/bill/total/index',
            component: Totalbill
        },
        '/app/userbill': {
            curPath: './component/user/bill/index',
            component: Userbill
        },
    };

导入route.js组件

import { routeModules } from './utils/route';
    import ErrorPage from './component/error/errorPage';
    import Users from './component/user/list';

遍历Route:

<Switch>
        <Route exact path="/app/" render={() => <Redirect to={Users}></Redirect>}></Route>
        {
            this.state.menuMudules.map((mitem) => {
                let mH_ = null;
                if (mitem.authModuleList && mitem.authModuleList.length) {
                    mH_ = mitem.authModuleList.map((citem) => {
                        console.log(citem.uri, routeModules[citem.uri].curPath);
                        return <Route path={citem.uri} key={citem.uri} exact component={routeModules[citem.uri].component}></Route>
                    });
                };
                return mH_;
            })
        }
        <Route component={ErrorPage}></Route>
    </Switch>