react-router-dom 手写js渲染路由

react-router-dom 手写js渲染路由

笔者最近新搭建了一个项目，但是并没有使用市面上已经成熟的框架类似umi之类的，所以路由得自己手写。

项目目录如下：

根目录下的index.js文件是项目的入口文件。

根目录下的App.js文件是项目路由渲染的地方，其实也可以看成是项目的入口，代码如下：

函数renderRouter的作用是遍历路由的配置文件，把相应的路径和组件一一对应起来。

import './App.less';
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
import routers from "./routers";

function App() {

  function renderRouter(router, index) {
// 如果遇到子路由，则调用自身的函数遍历子路由
    if (router.children) {
      return (
          <Route path={router.path} element={router.component} key={index}>
            {router.children.map(item => renderRouter(item))}
          </Route>
      )
    }
// 如果遇到重定向，使用<Navigate to='' />直接跳转
    return <Route key={router.path} path={router.path} element={router.index ? <Navigate to={router.redirect}/> : router.component} index={router.index} />;
  }

  function renderRouterMap () {
    const ROUTE = routers.map((router, index) => renderRouter(router, index));
    return ROUTE;
  }

  return (
    <>
      <Router>
        <Routes>
          {
            renderRouterMap()
          }
        </Routes>
      </Router>
    </>
  );
}

export default App;

router文件的写法，代码仅供参考：

import Home from '@/pages/Home';
import Outpatient from '@/pages/Outpatient';
import PsychologicalTherapy from '@/pages/PsychologicalTherapy';
import MeasurementEvaluation from '@/pages/MeasurementEvaluation';
import EvaluationList from '@/pages/MeasurementEvaluation/EvaluationList';
import DoScale from '@/pages/MeasurementEvaluation/DoScale';
import ManMachinePsychotherapy from '@/pages/ManMachinePsychotherapy';
import MachinePsychotherapyList from '@/pages/ManMachinePsychotherapy/MachinePsychotherapyList';
import MachinePsychotherapyDetail from '@/pages/ManMachinePsychotherapy/MachinePsychotherapyDetail';
import HealthScience from '@/pages/HealthScience';
import MeasureClass from '@/pages/HealthScience/MeasureClass';
import MediationClass from '@/pages/HealthScience/MediationClass';
import HealthScienceArticle from '@/pages/HealthScience/HealthScienceArticle';
import OutpantientLayout from '@/components/outpantientLayout/layout';

const routes = [
  {
    path: 'home', 
    component: <Home />,
  },
  {
    path: '/',
    component: <OutpantientLayout />,
    children: [
      {
        index: true,
        redirect: 'home'
      },
      {
        path: 'outpatient',
        component: <Outpatient />,
      },
      {
        path: 'psychologicalTherapy',
        component: <PsychologicalTherapy />,
      },
      {
        path: 'measurementEvaluation',
        component: <MeasurementEvaluation />,
        children: [
          {
            index: true,
            redirect: 'list'
          },
          {
            path: 'list',
            component: <EvaluationList />,
          },
          {
            path: 'doScale',
            component: <DoScale />,
          },
        ]
      },
      {
        path: 'manMachinePsychotherapy',
        component: <ManMachinePsychotherapy />,
        children: [
          {
            index: true,
            redirect: 'list'
          },
          {
            path: 'list',
            component: <MachinePsychotherapyList />,
          },
          {
            path: 'detail',
            component: <MachinePsychotherapyDetail />,
          },
        ]
      },
      {
        path: 'healthScience',
        component: <HealthScience />,
        children: [
          {
            index: true,
            redirect: 'mediationClass',
          },
          {
            path: 'mediationClass',
            component: <MediationClass />,
          },
          {
            path: 'measureClass',
            component: <MeasureClass />,
          },
          {
            path: 'articleDetail',
            component: <HealthScienceArticle />,
          }
        ]
      },
    ]
  }
];

export default routes;