react笔记 路由嵌套

如果你的项目需要很多个路由  传统的路由方式就显得十分臃肿

因此我们需要对路由模块化

import xxxrouter   记住  不要在import上面定义变量  会报错

let routes = [{
    path: "/",
    component: Home,
    exact: true
}, {
    path: "/News",
    component: News,
    exact: false
}, {
    path: "/",
    component: Home,
    exact: true
}, {
    path: "/",
    component: Home,
    exact: true
},]

class XXX

是不是对写法很熟悉？  没错  与vue中的路由模块化写法相同

我们需要在render 中循环遍历这个routes数组

      {
        routes.map((route,key)=>{
          if(route.exact){
            return <Route key={key} exact path={route.path} component={route.component}></Route>
          }else{
            return <Route key={key} path={route.path} component={route.component}></Route>
          }
        
        })
      }

这样就做到了路由的模块化

我们可以选择将routes封装为一个model 引入组件 随后将 export暴露出来 在需要的页面引入这个model