# vite-react

**Repository Path**: ldodo/vite-react

## Basic Information

- **Project Name**: vite-react
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-10
- **Last Updated**: 2024-11-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## vite-react-project
- demo演示嵌套路由处理

### 推荐node: 14

### 开发构建命令（推荐用vite）
1. 开发：yarn dev(vite开发) | yarn dev:w(webpack)
2. 开发(API本地代理)：IP=1 yarn dev | IP=1 yarn dev:w
3. 构建：yarn build(默认vite + gulp)

### 功能点
1. node 最新，其他版本还没试过
2. react 16.14
3. router 5
4. webpack 5
5. 构建一次，生成三个文件夹 t-dist / dist / assets(本地资源托管)
  - vite(webpack) 构建一次，生成（dist/vite）目录，并且是cdn生产链接，通过gulp二次加工，分别生成本地托管（assets）、测试环境（t-dist/vite）两个目录
6. 默认资源走cdn, 如果要走本地静态资源，请通过接口切换：http://localhost:8080/cdn?cdn=0

### 嵌套路由两种写法，详情查看 modules -> A -> A2
```javascript
// 这种用于动态导入路由
export default function () {
  const { path, url } = useRouteMatch();

  return (
    <Wrapper>
      <Switch>
        {routes.map((route, idx) => (
          <Route key={idx} path={`${path}${route.path}`} exact component={route.component} />
        ))}
      </Switch>
    </Wrapper>
  );
}
```

```javascript
export const RouteWithSubRoutes = (route) => {
  return (
    <Route
      path={route.path}
      render={(props) => (
        // pass the sub-routes down to keep nesting
        <route.component {...props} routes={route.routes} />
      )}
    />
  );
};

const AppRouterWrapper = ({ routes }) => {
  return (
    <Switch>
      {routes.map((route, i) => (
        <RouteWithSubRoutes key={i} {...route} />
      ))}
    </Switch>
  );
}

export default {
  path: '/common',
  component: AppRouterWrapper,
  routes: routes.map((d) => ({ ...d, path: `/common${d.path}` })),
};
```