React PureComponent导致react-router-dom Link 失效 路由跳转失败(地址栏变，页面不跳转)

版权声明：心灵泽尘 https://blog.csdn.net/github_38313789/article/details/83473521

加载路由的组件 不能 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',
      },
    ],
  },
]