Router.push() 更改 url 但被 404 捕获.刷新相同的 url 有效 [英] 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>

我的 Items 组件列出了一堆项目，每个项目都有一个唯一的 id.

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

ItemDetail 组件...可以说只是在屏幕上显示 props.params.id.

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

当我点击一个项目时，我用项目的 id 调用 router.push('items/'+id).

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

URL 已正确更新(例如 */items/1234)，但它显示了 NotFound 组件.

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

如果我然后按 F5(即重新加载相同的 URL)，它会正确显示 ItemDetail 组件.

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

知道为什么会这样吗?两者的 URL 相同.

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

(注意:如果我将 path=':id' 更改为 path='*'，它会转到 router.push() 上的正确页面，但我当然无法访问 props.params.id.)

(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)

推荐答案

看来 router.push() 使用了 绝对 路径(带有前导 /) 仅.

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

使用如上的相对路径导致URL更新，但路由器没有更新所以页面没有显示.按 F5 会加载完整路由，因此显示页面.

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.

因此我需要:router.push('/items/'+id)

这篇关于Router.push() 更改 url 但被 404 捕获.刷新相同的 url 有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！