react环境搭建（五）

路由进一步封装
npm install @loadable/component --save-dev

@loadable/component   //实现路由懒加载

import loadable from '@loadable/component';
const Home = loadable(() => import('@views/home/Home'))

npm install react-router-cache-route --save-dev

 npm install  react-router-dom@5.3.0 --save-dev

index.js

import CacheRoute, { CacheSwitch } from 'react-router-cache-route';
import {
    HashRouter as Router,
    Redirect,
    Route,
} from 'react-router-dom';
import allRoutes from './routers'

export default function App() {
    const cachedRoutes = allRoutes.filter(v => !!v.cached);
    const routes = allRoutes.filter(v => !v.redirect && !v.cached);
    const redirects = allRoutes.filter(v => !!v.redirect && !v.cached);
    return (
        <Router>
            {
                redirects.map((item, i) => (
                    <Route key={i} path={item.path} exact>
                        <Redirect to={item.redirect} />
                    </Route>
                ))
            }
            <Route
                render={(props) => {
                    const { history: { location, action } } = props;
                    const { pathname = '', search = '' } = location;
                    console.log(`router : ${action}, url: ${pathname}${search}`);
                    return (
                        <CacheSwitch location={location}>
                            {cachedRoutes.map((route, i) => <CacheRoute key={i} {...route} />)}
                            {routes.map((route, i) => <RouteSubRoutes key={i} {...route} />)}
                        </CacheSwitch>
                    )
                }}
            />

        </Router>
    )
}

function RouteSubRoutes(route) {
    const { path } = route;
    return (
        <Route
            path={path}
            render={
                (props) => (
                    <route.component
                        {...props}
                        exact={!!route.exact}
                        routes={route.routes}
                    />
                )
            }
        />
    );
}

routers.js

/**路由文件 */
import loadable from '@loadable/component';
const Home = loadable(() => import('@views/home/Home'));

const allRoutes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home,
        exact: true
    }
]

export default allRoutes;