# react-ts

**Repository Path**: yinwei-international/react-ts

## Basic Information

- **Project Name**: react-ts
- **Description**: react-ts 工程init 基于react-router v6版本 动态路由
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-06-14
- **Last Updated**: 2023-06-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### react-router 动态懒加载路由的3种方式：

-  ##### 使用@loadable/component方法：推荐使用这个

  ```npm
  yarn add @loadable/component
  ```

  引入组件:

```js
import Loadable from '@loadable/component'
const Home=Loadable(()=>import('./views/Home.jsx'));
const Login=Loadable( ()=>import('./views/Login.jsx'));
```

```javascript
<Route path=''/home'' component={Home}></Route>
<Route path=''/login'' component={Login}></Route>
```

### 2.使用react-loadable方法：不推荐使用这个

 引入组件:

```javascript
import Loadable from 'react-loadable'
const Home=Loadable(()=>import('./views/Home.jsx'));
const Login=Loadable( ()=>import('./views/Login.jsx'));
<Route path=''/home'' component={Home}></Route>
<Route path=''/login'' component={Login}></Route>
```

### **3.使用Suspense配合lazy使用**

```javascript
import {Suspense，lazy} from 'react' 
const Home=lazy(()=>import('./views/Home'))
 const Login=lazy(()=>import('./views/Login'))
<Suspense fallback={<div>正在加载中。。。</div>}>
        <Route path="/home" component={Home}/> 
        <Route path=''/login'' component={Login}></Route>
</Suspense>;

```