reactjs - 单击 <Link> 时，react-router 4 不会重新渲染

Question

我正在做服务器端渲染，到目前为止，初始页面可以根据输入到浏览器的路径使用 react-router 成功渲染，例如/, /customers

代码

Routes.jsx

import React from 'react'
import { Route, Switch } from 'react-router-dom'

import Home from './Home'
import CustomerList from './CustomerList'

const PageNotFound = () => <div className="box">
    <h3 className="title">Page Not Found</h3>
</div>

export default () => {
    return <div>
        <Switch>
            <Route exact path="/" component={ Home } />
            <Route path="/customers" component={ CustomerList } />
            <Route component={ PageNotFound }></Route>
        </Switch>
    </div>
}

NavBar.jsx

import React from 'react'
import { Link } from 'react-router-dom'

export default () => <nav className="nav">
    <div className="nav-right">
        <Link to="/" className="nav-item is-tab">Home</Link>
        <Link to="/customers" className="nav-item is-tab">Customer</Link>
    </div>
</nav>

问题

我只在服务器端渲染成功，但我无法在客户端版本上重新渲染，当点击任何链接时都没有重新渲染发生(只有 URL 在浏览器上被更改)

所以我尝试了下面的编码

Routes.jsx

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

    return <CustomerList />
}
...

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

客户端版本还是看不到日志

我相信我已经完成了与客户端版本相同的编码(客户端版本没有问题)，所以请指导如何解决问题

谢谢大家

Answer 1

我遇到了具有相同症状的问题，但可能与您的 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)

我的解决方案就是使用 <App />而不是 <Connect /> , 连接子组件内的商店。

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