Echarts大屏

先搭建初始项目

1.先创建一个react脚手架

     npm create react-app 项目名称

2.搭建路由需要下载一个包

     npm i react-router-dom

3.创建一个router文件夹index文件放置所需的路由

import { lazy } from "react";

export const homeRoute=[

    {

        path:'/home/index',

        element:lazy(()=>import('../page/home/index')),

        title:'首页'

    }

]

const routes=[

    {

        path:'/',

        to:'/home/index'

    },

    {

        path:'/home',

        element:lazy(()=>import('../page/home')),

        children:homeRoute

    }

]

export default routes

4.在App.js搭建路由

import React,{Suspense} from 'react'

import {BrowserRouter,Route,Routes,Navigate} from 'react-router-dom'

import routes from './router'

function App() {

  const rendeRoutes=(arr)=>{

    // return arr && arr.map((item,index)=>{

    //   return <Route key={index} path={item.path} element={ item.element ? <item.element><item.element/> : <Navigate to={item.to}><Navigate/> }>

    //     {

    //       item.children && rendeRoutes(item.children)

    //     }

    //   </Route>

    // })

    return arr && arr.map((item, index) => {

      return <Route key={index} path={item.path} element={item.element ? <item.element></item.element> : <Navigate to={item.to}></Navigate>}>

        {

          item.children && rendeRoutes(item.children)

        }

      </Route>

    })

  }

  return (

    <Suspense>

      <BrowserRouter>

        <Routes>

          {

            rendeRoutes(routes)

          }

        </Routes>

      </BrowserRouter>

    </Suspense>

  )

}

export default App