React路由封装的实现浅析_React

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文件
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;

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;