CODEWITHSUNDEEP
react-router
ZephDavies
ZephDavies

Reputation: 4524

Router.push() changes url but is caught in 404. Refresh same url works

I have a router something like this:

<Router history={browserHistory}>
  <Route path="items">
    <IndexRoute component={Items} />
    <Route path=":id" component={ItemDetail} />
  </Route>
  <Route path="*" component={NotFound} />
</Router>

My Items component lists a bunch of items, each with a unique id.

The ItemDetail component... lets say just displays the props.params.id on screen.

When I click on an item, I call router.push('items/'+id) with the item's id.

The URL is updated correctly (e.g. */items/1234), yet it displays the NotFound component.

If I then press F5 (i.e. reload the same URL), it correctly displays the ItemDetail component.

Any idea why this is the case? The URL is the same for both.

(Note: If I change path=':id' to path='*' it goes to the correct page on router.push(), but I lose access to props.params.id, of course.)

(Note: If I change all the paths to use a / at the start, the navigation is very broken)

Upvotes: 1

Views: 841

Answers (1)

ZephDavies
ZephDavies

Reputation: 4524

It appears that router.push() uses an absolute path (with a leading /) only.

Using the relative path as above caused the URL to update, but the router did not update so the page was not displayed. Pressing F5 caused the full route to be loaded, and therefore displayed the page.

Therefore I needed: router.push('/items/'+id)

Upvotes: 1

Related Questions