react-router does not re-render the component when clicking on the <Link>

Created on 17 May 2017 · 1Comment · Source: ReactTraining/react-router

Version

4.1.1

I'm working on server-side rendering, so far the initial page can be rendered with <StaticRouter> successfully according to the path entered to the browser e.g. /, /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'm only successful with server-side rendering version, but I cannot get re-render with the client version (<BrowserRouter>), when clicking on any of the links there is no re-rendering happens (only the URL gets changed on the browser)

So I have tried with coding shown below

Routes.jsx

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

    return <CustomerList />
}
...

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

I still cannot see the log which means no re-rendering happens

I believe I have done with the same coding as the client-side only version (no problems on the client-side only version), so please guide how to solve the problem

Thanks all

Source