url refresh nor working as expected with create-react-app and react-router-redux on DEV

Question

I'm trying to implement minimal routing in my create-react-app using react-router-redux . Documentation indicates that, if not using create-react-app, one needs to configure Webpack in order for the url refresh to work as expected (a setting related to 'history fall back'), but if using create-react-app this should automatically work. However, in my development environment, url refresh is not working as expected. Details: if the second route's url is current in the browser when I do a page refresh, then the second route is re-loaded, while I would have expected the main route (with path "/") would load instead. My index.js includes the following:

render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
        <div>
            <Route exact path="/" component={MyHomeComponent} />
            <Route exact path="/roster" component={Roster} />
        </div>
        </ConnectedRouter>
    </Provider>,
    document.getElementById('root')

)

Could this be a documentation bug, or am I forgetting something in my code? Suggestions are very much appreciated.

Answer 1

A refresh should maintain the same pathname, not reset to root.

I'm not sure why you would want to go to the root on refresh, but the way that you would accomplish that would be to manually navigate when your application is loading.

import { createBrowserHistory } from 'history'

const history = createBrowserHistory()
history.replace('/')

ReactDOM.render((
  <Provider>
    <ConnectedRouter history={history}>
      ...
    </ConnectedRouter>
  </Provider>
), holder)