React-router: Routes don't update with HashHistory but URL does change

[neopostmodern]

Version

{
    "react": "^15.4.2",
    "react-apollo": "^1.0.0",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.2",
    "react-router": "4",
    "react-router-dom": "^4.0.0",
    "react-router-redux": "^5.0.0-alpha.5",
    "redux": "^3.6.0",
}

Test Case

Can't write a CodePen because no UMD for 'react-router-redux@next' is available

import { ConnectedRouter } from "react-router-redux";
import createHistory from 'history/createHashHistory'
const history = createHistory();

render(
  <ApolloProvider store={store} client={client}>
    <ConnectedRouter history={ history }>
      <Layout>
        <Route path="/links/add" exact component={AddLinkPage} />
        <Route path="/" exact component={LinksPage} />
      </Layout>
    </ConnectedRouter>
  </ApolloProvider>,
  document.getElementById('root')
)

Within Layout it displays this.props.path.
LinksPage has both a <Link to="/links/add">Add new</Link> and this.props.history.push('/links/add')

Steps to reproduce

Use a HashHistory in an Electron app. Had no luck with the regular history.

Click on the Link and the Layout will display the new URL and the correct page.
Trigger this.props.history.push('/links/add') and the Layout will display the new URL but the page doesn't update (it's still LinksPage instead of AddLinkPage)

Expected Behavior

The URL and the Route should change.

Actual Behavior

When triggered by this.props.history.push the Route doesn't change, only the URL does.

Dispatching redux actions or calling push on the history itself have the same behavior as this.props.history.push; only Link works.

[christiantinauer]

The described problem was introduced after "react-router-dom": "4.0.0-beta.6". With beta6 push works.

[timdorr]

If you're doing an Electron app, you should be using a memory history. There is no browser bar to manipulate and hash histories have quirks (like this) that will cause problems for you.

[christiantinauer]

But same problem exists for Browser with Hashistory.

[neopostmodern]

I just switched

import createHistory from 'history/createHashHistory'

to

import createHistory from 'history/createMemoryHistory'

(or do I need to change something more?) and the issue remains exactly the same. So, possibly electron related?

Although @christiantinauer states that it happens in the browser as well - do you maybe a have a repo to reproduce?

[neopostmodern]

@timdorr can you please re-open this as it's probably not limited to electron and definitely not solved by using the memory router?

[timdorr]

If you're using Redux and things aren't updating, see this guide: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

[neopostmodern]

Wow, that did fix it; I had a <Layout> between my <HashRouter> and <Switch>.

I was aware of this issue under different circumstances but wasn't thinking of it because navigation by <Link> worked. Is there any documentation on how a <Link> is different to a history.push action? Just out of curiosity...

[timdorr]

Other than being a React component, there really isn't any

[tuchk4]

I faced this issue today - Routes don't update with HashHistory but URL does change

@neopostmodern very similar changes fixed my app.

before:

<HashRouter>
  <App routes={routes} />
</HashRouter>

App:

<AppLayout>
  <Switch>
    {
      routes.map(route => <Route
        key={route.path}
        exact
        path={route.path}
        component={component}
      />)
    }
    <Route component={() => '404'} />
  </Switch>
</AppLayout>

after:

<HashRouter>
  <Switch>
    <App routes={routes} />
    <Route component={() => '404'} />
  </Switch>  
</HashRouter>

App:

<AppLayout>
  {
    routes.map(route => <Route
      key={route.path}
      exact
      path={route.path}
      component={component}
    />)
  }
</AppLayout>

---

@ryanflorence

• Maybe should be fixed if this is bug.
• Or maybe should be cleared at documentation if this is not bug.