技術標籤：親測：真的可用

import React, { Component, setState, lazy, Suspense } from 'react'
import { Route, Link } from 'react-router-dom'

/**
 * setState可以傳遞一個物件也可以傳遞一個函式一個引數如果傳遞函式會上接受兩個引數一個state,props
 * 函式的方式預設會返回更新以後的state數值
 * 路由的懶載入
 */
// export default class App extends Component {
//   state={count:0}
//   handle=()=>{
//     this.setState(state=>state.count+=10)
//   }
//   render() {

//     return (
//       <div>
// {this.state.count}
//         <button onClick={this.handle}>增加</button>
//       </div>
//     )
//   }
// }


/**
 * 直接出現的錯誤
 * Error: A React component suspended while rendering, but no fallback UI was specified.

Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.
解決辦法
 * 定義懶路由
 */
const Home = lazy(() => import('./list/index'))
export default class App extends Component {
  render() {
    return (
      <div>
        <Link to='/list'>list</Link>
        <Suspense fallback={<h1>....</h1>}>        <Route path="/list" component={Home}>
        </Route></Suspense>

      </div>
    )
  }
}