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 =