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>

单击<link />时，react-router 4不会重新呈现

代码

问题

1 个答案: