react遍历Route处理

遍历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>