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

关注

原创最新推荐文章于 2026-02-26 00:22:23 发布 2k 阅读 AI 写同款· GEO 优化 ›

从零构建：如何用MATLAB打造你的第一个Stewart平台运动学仿真器本文详细介绍了如何使用MATLAB从零构建一个六自由度Stewart平台运动学仿真器，涵盖基础理论、环境配置、运动学建模、动态轨迹规划和实时可视化实现。通过MATLAB的Robotics System Toolbox和Simulink等工具，读者可以掌握六自由度Stewart平台的逆运动学求解、正运动学求解及仿真系统集成，适用于飞行模拟器和精密定位等应用场景。阅读详情

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

收录于