載入路由的元件 不能 extends PureComponent

entry.js

import React, { Component } from 'react'
import { BrowserRouter } from 'react-router-dom'
import { renderRoutes } from 'react-router-config'
import { Provider } from 'react-redux'
import routes from './Routes'

class Main extends Component {  // 注意 這種元件不要繼承 PureComponent

  render() {
    return renderRoutes(routes)
  }
}
 

 App.js

import React, { Fragment } from 'react'
import { renderRoutes } from 'react-router-config'
import Header from './common/Header'


const App = (props) => {
  return (
    <Fragment>
      <Header staticContext={props.staticContext} />
      {renderRoutes(props.route.routes)}
    </Fragment>
  )
}
export default App
 

Routes.js

export default [
  {
    path: '/',
    component: App,
    loadData: App.loadData,
    routes: [
      {
        path: '/',
        component: Home,
        exact: true,
        loadData: Home.loadData, // 在展示 home 元件之前 載入資料
        key: 'home',
      },
      {
        path: '/detail',
        component: Detail,
        exact: true,
        loadData: Detail.loadData,
        key: 'detail',
      },
      {
        component: NotFound,
        exact: true,
        key: 'notFound',
      },
    ],
  },
]