Reactjs 单击时不重新渲染<；链接>；

我正在进行服务器端渲染，到目前为止，可以根据输入到浏览器的路径，使用

react router

成功渲染初始页面，例如

/

，

/customers

代码 Routes.jsx

从“React”导入React
从“react router dom”导入{Route，Switch}
从“./主页”导入主页
从“./CustomerList”导入CustomerList
常量PageNotFound=（）=>
找不到页面
导出默认值（）=>{
返回
}

NavBar.jsx

从“React”导入React
从“react router dom”导入{Link}
导出默认值（）=>
家
顾客

问题 我只成功地进行了服务器端渲染，但无法使用客户端版本进行重新渲染，当单击任何链接时，都不会进行重新渲染（只有浏览器上的URL发生更改）

所以我尝试了下面的编码

Routes.jsx

const renderConstomerList=（）=>{
console.log（'OK'）
返回
}
...

我仍然无法在客户端版本上查看日志

我相信我使用了与仅客户端版本相同的编码（仅客户端版本没有问题），因此请指导如何解决问题

---

谢谢大家

我遇到了具有相同症状的问题，但原因可能不同，因为这里没有提供您的

index.js

。我希望你已经解决了你的问题，所以我把我的发现放在这里供其他人参考

在

index.js

中检查客户端和服务器端渲染的根渲染函数，使用

redux

，我的如下所示：

// React 16 global polyfill for IE < 11
import 'core-js/es6/map'
import 'core-js/es6/set'

import * as React from 'react'
import ReactDom from 'react-dom'
import { Provider, connect } from 'react-redux'
import { BrowserRouter as Router } from 'react-router-dom'

import store from '~/store'
import App from './App'

const mapStateToProps = (state) => ({...state})
const mapDispatchToProps = {}

const render = App => {
  const Connect = connect(mapStateToProps, mapDispatchToProps)(App)

  ReactDom.hydrate(
    <Provider store={store}>
      <Router>
        <Connect />
      </Router>
    </Provider>,
    document.getElementById('root')
  )
}

render(App)

//IE<11的React 16全局polyfill
导入“core js/es6/map”
导入“core js/es6/set”
从“React”导入*作为React
从“react dom”导入react dom
从“react-redux”导入{Provider，connect}
从“react Router dom”导入{BrowserRouter as Router}
从“~/store”导入存储
从“./App”导入应用程序
常量mapStateToProps=（状态）=>（{…状态}）
常量mapDispatchToProps={}
const render=App=>{
const Connect=Connect（mapStateToProps、mapDispatchToProps）（应用程序）
水合物(
,
document.getElementById（'root'））
)
}
渲染（应用程序）

我的解决方案只是使用

而不是

，将存储连接到子组件中

<Provider store={store}>
  <Router>
    <App />
  </Router>
</Provider>

const renderCustomerList = () => {
    console.log('OK')

    return <CustomerList />
}
...

<Route path="/customers" render={ renderCustomerList } />

// React 16 global polyfill for IE < 11
import 'core-js/es6/map'
import 'core-js/es6/set'

import * as React from 'react'
import ReactDom from 'react-dom'
import { Provider, connect } from 'react-redux'
import { BrowserRouter as Router } from 'react-router-dom'

import store from '~/store'
import App from './App'

const mapStateToProps = (state) => ({...state})
const mapDispatchToProps = {}

const render = App => {
  const Connect = connect(mapStateToProps, mapDispatchToProps)(App)

  ReactDom.hydrate(
    <Provider store={store}>
      <Router>
        <Connect />
      </Router>
    </Provider>,
    document.getElementById('root')
  )
}

render(App)

<Provider store={store}>
  <Router>
    <App />
  </Router>
</Provider>