7.17一日总结

1.路由封装(递归)

        a.创建一个文件routes包括index.js和router.js

         b.在根组件中引入并挂载

import RouteView from "./routes";

function App(){
  return (
    

      
      //也可以当做方法调用
      
    
  )

}

export default App;

     c.index.js中的内容

                通过递归创建route

                封装路由容器

import { Routes,Route } from "react-router-dom";
import routes from "./routes";

// 通过递归创建Route
const createRoute=function(routes){
    return routes.map((item,index)=>{
        //循环一级路由
        return }>
            //递归循环子级路由
            {Array.isArray(item.children)?createRoute(item.children):null}
        
    })
}
// 路由容器
const RouteView=function(){
    return 
        //调用方法
        {createRoute(routes)}
  
}
export default RouteView;

d.routes.js内容

        封装路由表

        注意:

                navigate放在箭头函数中调用

                组件不能使用标签调用,直接写组件名

                

import { Navigate } from "react-router-dom";
import Home from "../pages/home/Home";
import About from "../pages/about/About";
import Classfiy from "../pages/classfiy/Classfiy";
import HomeA from "../pages/home/HomeA";
import HomeB from "../pages/home/HomeB";
import HomeA1 from "../pages/home/HomeA_1";
import HomeA2 from "../pages/home/HomeA_2";
const routes=[
    {
        path:'/',
        component:()=>
    },
    {
        path:'/home',
        name:'home',
        component:Home,
        children:[
            {
                path:'/home',
                component:()=>
            },
            {
                path:'homea',
                component:HomeA,
                children:[
                    {
                        path:'homea_1',
                        component:HomeA1
                    },
                    {
                        path:'homea_2',
                        component:HomeA2
                    },
                ]
            },
            {
                path:'homeb',
                component:HomeB
            },
        ]
    },
    {
        path:'/about/:id?',
        component:About
    },
    {
        path:'/classfiy',
        component:Classfiy
    },
   
    {
        path:'*',
        component:()=>
    }
]
export default routes

 2.