Route in React

谈谈 route in AntD

路由分组与懒加载

路由分组，可以借助于前置匹配exact={false},懒加载用于code split webpack 打包时减少初始包的体积，提供性能

---

路由分组

假设我们有一下路由

/parent/child1
/parent/child2
/parent/child3

那么我们可以把child1-3路由分为一组，全部挂于parent 路由下， 代码如下：
非懒加载的代码, 改代码直接被打包到根/父路由

\ 
//Native
const Parent_Lazy=()=>{
    return (
        <Suspense fallback={<Loading/>}>
          {
            React.createElement(React.lazy(()=>import('./lazy')))
          }
        </Suspense>
    )
}

// third party package loadable
const Parent2_Lazy = loadable(()=>import('./lazy'),{
    fallback:<Loading/>
  });

// 路由定义
function Routing(){
    return (
        <>
            <ul>
                <li><Link to="/parent/child1">Child1</Link></li>
                <li><Link to="/parent/child2">Child2</Link></li>
                <li><Link to="/parent/child3">Child3</Link></li>
            </ul>
        </>
    )
}

//路由匹配
funtion Route(){
    return (
        <Route exact={false} path={`/parent`}><Parent_Lazy/></Route>;
        //<Route exact={false} path={`/parent`}><Parent2_Lazy/></Route>;
    )
}

懒加载的代码,下面的代码跟子组件Child1-3 一起打包，最终懒加载。

export default function lazy(){
    return (
        <>
            <Route path={/parent/child1}><Child1/></Route>
            <Route path={/parent/child2}><Child2/></Route>
            <Route path={/parent/child3}><Child3/></Route>
        </>
    )
}

---

总结一下：

• 路由分组加上懒加载，可以很方便的实现代码模块化，代码间解耦，减少单包的大小
• loadable vs React.lazy 借用loadable 原话
  它们都支持Suspense,
  loadable: 支持 SSR, library Splitting, import(./${value});