React路由的封装

React中路由是这样编写的

    <Switch>
          <Route path='/index' component={Index}></Route>
          <Route exact path='/login' component={login} ></Route>
          <Route exact path='/xqy/:id' component={Xqy}></Route>
          //重定向
          <Redirect from='/' to='/index'></Redirect>
          //404
          <Route path="*" component={notFound}></Route>
        </Switch>

现在要跳的路由很少，还可以接受，一旦后期路由变多，那么这个文件会变的很臃肿，我们可以对他进行封装，让他动态的去渲染路由。

•  首先编辑路由表，

import { lazy, Suspense } from 'react'


// 一级路由
var Index = lazy(() => import('../views/Index/Index'))
var Login = lazy(() => import('../views/Login/login'))
var Xqy = lazy(() => import('../views/Xqy/xqy'))
var NotFound = lazy(() => import('../views/NotFound/notFound'))
// 二级路由
var home = lazy(() => import('../views/Index/home/home'))
var Cate = lazy(() => import('../views/Index/Cate/cate'))
var Gwc = lazy(() => import('../views/Index/Gwc/gwc'))
var Mine = lazy(() => import('../views/Index/Mine/mine'))

export default [
    {
        path: '/index',
        component: Index,
        children: [
            {
                path: '/index/home',
                component: home,
            },
            {
                path: '/index/cate',
                component: Cate,
            },
            {
                path: '/index/cate',
                component: Cate,
            },
            {
                path: '/index/gwc',
                component: Gwc,
            },
            {
                path: '/index/mine',
                component: Mine,
            },
            {
                from: '/index',
                to: '/index/home',
            },
            {
                path: '*',
                component: NotFound,
            },
        ]
    },
    {
        path: '/login',
        component: Login,
    },
    {
        path: '/xqy/:id',   //动态路由：id占位
        component: Xqy,
    },
    {
        from: '/',
        to: '/index',
    },
    {
        path: '*',
        component: NotFound,
    },

]

•  封装的代码

import React, { Component, Suspense } from 'react';
import { Route, Redirect, Switch } from 'react-router-dom'
interface RouteItem {
  path?: string,
  component?: any,
  children?: Array<RouteItem>,
  from?: string,
  to?: string
}
interface Props {
  routes: Array<RouteItem>
}
class RouterView extends Component<Props> {
  render() {
    return (
      <Suspense fallback={<div className='loading'>loading...</div>}>
        <Switch>
          {
            this.props.routes.map((item: any, index: any) => {
              // 重定向
              if (item.from) {
                return <Redirect key={index} exact from={item.from} to={item.to || ''}></Redirect>
              }
              else if (item.children) {
                return (
                  // 判断有没有子路由
                  <Route key={index} path={item.path}   render={() => {
                    return < item.component routes={item.children} />
                  }}></Route>
                )

              }
              else {
                return (
                  <Route key={index} path={item.path} component={item.component}></Route>
                )
              }
            })
          }
        </Switch>
      </Suspense>
    );
  }
}

export default RouterView;

• 一级路由

import routeConfig from './router/routeConfig';//导入路由表
import RouterView from './router/routerView';//导入封装
<RouterView routes={routeConfig}></RouterView>

• 二级路由

      //在封装中已经把你的二级路由表存储在props中了
    <RouterView routes={this.props.routes} />

  不管是几级嵌套路由，这个封装都可以满足，也与vue中编写路由模式比较像