react--路由封装

路由封装流程

• 封装路由的文件组件 ，针对一级路由的封装操作，单独路由文件抽离出单独的文件中去

• src中新建一个router文件夹，在文件夹新建index.js文件，路由配置文件迁移过去

• router文件夹中新建mapRouter文件，路由配置转换成数组对象格式，参考Vue配置

• index.js循环Route组件即可，二级路由配置先暂时在父组件中配置即可

注：文件夹的名称和文件的名字可以随便定义，无需完全按照上方流程来

index.js

import { default as React } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {Routes} from '../src//router/index'
const root = ReactDOM.createRoot(document.getElementById('root'));
 
 
root.render(
  <Routes/>
);
reportWebVitals();

router/index.js

//router/index.js文件
import { HashRouter as Router, Route, Switch } from "react-router-dom"
import routes from './mapRoute';
//定义的路由函数直接挂载到主页面上去
const Routes = function () {
    console.log(routes);
    return (
      <Router>
        <Switch>
          {
            routes.map((item,index)=>{
                return (
                    <Route key={index} path={item.path} component={item.component}>Route>
                )
            })
          }
          
        Switch>
      Router>
    )
  }
export default Routes;

 HashRouter as Router，这是给HashRouter起的别名，可以不写

router/mapRoute.js路由配置文件

import App from '../App';
import Detail from '../detail';
import Layout from "../admin/layout"
import About from '../pages/About';
const routes = [
    {
        path:"/about",
        title:"About",
        component:About,
    },
    {
        path:"/admin",
        title:"管理后台",
        component:Layout,
        exact:false,
    },{
        path:"/detail/:id",
        title:"detail",
        component:Detail,
    },{
        path:"/",
        title:"App",
        component:App,
    }
]
export default routes;

这样我们react中的路由就封装好了，他的原理是跟我们vue中的路由一样，把路由封装到一个文件中，然后我们就可以直接在这个里面添加路由，不同的是，vue中有一个children属性用来定义二级路由，而react中没有

我们在这个js文件中引入路由，然后在index文件中进行循环渲染，同时也减少了我们的代码量

不过需要注意的是，我们在react路由封装中不能使用二级路由，这是一个弊端，我们可以将二级路由定义在父组件中定义