vite+react 数据大屏-路由

"react": "^18.2.0",

 "react-dom": "^18.2.0",

 "react-router-dom": "^6.16.0"

1、src-router下创建index.tsx 

import { lazy } from "react";
import { Navigate } from 'react-router-dom'
// import DataScreen from '../views/DataScreen/index'

const DataScreen = lazy(()=>import('../views/DataScreen/index'))

const routes = [
    { path: '/', element: <Navigate to="/dataScreen" replace /> },
    {
        path: '/dataScreen',
        element: <DataScreen />
    },
]

export default routes

2、main.tsx

import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import "@/styles/common.less";
// import './index.css'
import { BrowserRouter as Router } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <Router>
    <App />
  </Router>,
)

3、app.tsx

import { useRoutes } from 'react-router-dom' 
import { useLayoutEffect, useRef, useEffect,useState } from "react";
import routes from './router/index'
// import './App.css'

function App() {
  const routeElement = useRoutes(routes)
  
  return (
    <>
      
      {routeElement}
      
        
    </>
  )
}

export default App