react

react脚手架：

```shell
npm create react-app 项目名称
```

搭建路由：

下载包：

```shell
npm i react-router-dom
```

在router文件夹下新建routerConfig.ts文件，文件中配置路由：

```js
import {HashRouter, Routes, Route, Navigate} from 'react-router-dom'
import {lazy} from 'react'

let arr = [
    {
        path: '/',
        to: '/home'
    },
    {
        path: '/home',
        element: lazy(() => import('../views/Home/index'))
    },
    {
        path: '/equipment',
        element: lazy(() => import('../views/Equipment/index'))
    }
]

// 定义组件
const Router = () => {
    return (
        <HashRouter>
            <Routes>
                {
                    arr.map((item, index) => {
                        return (
                            <Route key={index} path={item.path} element={item.element ? <item.element></item.element> : <Navigate to={item.to}></Navigate>}>
                            </Route>
                        )
                    })
                }
            </Routes>
        </HashRouter>
    )
}

// 导出组件
export default Router
```

在index.js中导入路由文件，使用这个路由组件包含App组件：

```js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import Router from './router/routerConfig'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router>
    <App />
  </Router>
);