没用懒加载
直接引入，但组件较多时就会耗费性能，所以我们利用高阶组件，将我们要导入的组件包裹起来，要用到再去调用。
定义一个lazy函数，使用方法
ES6的import返回的是一个Promise对象，会立即执行，所以我们用一层箭头函数封装起来，当我们需要用到这个组件的时候，就会执行lazy函数，Lazy函数传入一个箭头函数，我们在高阶组件的生命周期函数中，取出该组件，再用返回一个类组件，该类组件实际上也就是Welcome
这样，只有当我们使用带该组件时，才会调用lazy函数，才会返回组件，否则不返回。达到一个路由懒加载的效果
二级路由
先看一级路由
引入我们的跟组件App,然后在App里面设置一级路由，
效果
然后我们想通过welcome去访问welcome组件，
在APP.JSX中必须写props.children，因为我们访问的一级二级路由都是作为App的子组件的。
这是welcome组件，通过Route,path=/welcome，访问
接着设置二级路由，思路同一级路由一样，把WELCOME组件当作App一级组件来看，如图
利用一个函数，将Welcome组件包裹起来，然后通过在里面放Route，注意路劲要写全，然后在Welcome组件中也需要写props.childern,因为A和B组件是作为WELCOME的子组件的，这样才会显示，不写是不会显示的。
效果是没有显示出来，注意！！！，二级路由，
这里不能加exact精确匹配，否则你输入/welcome/a，他是不会匹配到welcome这个组件，自然而然也不会匹配到里面的子组件。
这样写就对了，效果
三级路由依此类推。
二级路由也可以不用懒加载了，
如图
写完welcome组建后，用函数将其封装起来，并且将shop写在里面，那这个shop,
我们写完之后不要直接导出，导出一个Route，让其组件指向Shop即可。
推荐路由
接下来用的路由方式是我觉得比较省力的
我把routes都写在了一起，这样写的时候方便很多，不用每个组件都写Route,
这是我的根组件，就是我的入口组件就是这个。
React.Suspense是用来当路由懒加载还未显示出来的时候，作为优化交互，提醒用户的效果。
RenderRoutes是我写的一个组件，
我将写出来的routes传入这个组件，然后如果要重定向，我就写一个Redirect,如图，
这个一定要加exact，否则会出现，如果我们设置当去’/‘的时候跳到’/welcome‘,不设置这个的话，他是模糊匹配，那么你所有的跳转都包含’/’，那么不管你跳到哪都会回到’/welcome‘,所以得设置精准匹配
当我们去to时，我就让他的组件为redirect返回的组件。也就是我们要跳去的界面。
接下来写routes，因为每个routes是数据JSON数据，里面一个对象代表一个路由
这个对应这个
当我输入指定的路由，就调转到那个组件，而且还要把route传过去，因为，如果有children的话，我们还是要再做处理的。如这个welcome就是根组件的子组件，故要在app组件里面处理，
我们封装一个函数导出，然后通过我们刚才传的route，将里面的children传给RenderRoutes，因为RenderRoutes是返回Route组件的，而且因为根组件下面的子组件都要放在App里面，所以才要用App包裹起来，如果你的子组件不是放在App里面的，或者App这个组件不用来渲染东西，你也可以不用App包裹，设置一个重定向即可。接下来welcome里面也是有Children的，所以我们也要去welcome里面处理一下，思路一样
，而我们的Project是没有children的，所以不需要处理
效果
看似麻烦，其实思路很容易，而且这个一开始写麻烦而已，后面要加上别的页面的路由就很容易了。
思路就是，有children的组件，我就要去处理，没有children的组件，就不用处理了。