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

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

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值