Response-router 4 does not redraw when <Link> is clicked
I am working on server side rendering as long as the original page can be rendered using react-router
successfully according to the path entered into the browser for example. /
,/customers
Code
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>
Problem
I only get server side support, but I cannot get re-rendered with client version, no re-rendering occurs when clicking on any of the links (only the url changes in the browser)
So I tried with below encoding
Routes.jsx
const renderCustomerList = () => {
console.log('OK')
return <CustomerList />
}
...
<Route path="/customers" render={ renderCustomerList } />
I still can't see the log on the client version
I believe I did with the same code as the client side version (no problems with the client version), so please tell me how to solve the problem.
Thanks everyone
source to share
I am having problems with the same symptom, but it may not be the case because yours index.js
is not listed here. Hopefully you've already solved your problem, so I just posted my findings here for other links.
Go check your root render function in index.js
both client-side and server-side rendering, mine is as follows 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)
My solution is to just use <App />
instead <Connect />
, connect the store inside child components.
<Provider store={store}>
<Router>
<App />
</Router>
</Provider>
source to share