ReactRouter 的哈希路由器无法处理哈希更改

Question

I'm using ReactRouter's <HashRouter> class (my server isn't configured for <BrowserRouter> and this is an internal tool so I don't care about search engines or etc).

I have precisely one route:

<Route path="/:datestring" component={ConnectedDatePage} />

On my development version, this all works perfectly. I then package the app up (using webpack) into a single page and publish it, and on the server, clicking links changes the hash—but there is no corresponding change on the page.

Reloading the page with the new hash renders everything correctly, but then changing the hash again does nothing. What might be going on here?

UPDATE: I suspect it may be because, on the server, it is not running at the root level (it's at, eg, http://example.com/app/#/20170203/ instead of http://localhost/#/20170203/ ). I don't know how to configure the router to handle this, though.

Answer 1

My issue was I was not specifying exact option in the routes:

<Route exact path="/" component={Home} />
<Route exact path="/:datestring" component={ConnectedDatePage} />

Without this option, Home page was being rendered at all times. Very basic but fatal mistake. :D