Question

我有一个像这样的路由器：

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

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

ItemDetail组件......我们可以在屏幕上显示props.params.id。

当我点击某个项目时，我会使用该项目的ID致电router.push('items/'+id)。

网址已正确更新（例如*/items/1234），却显示NotFound组件。

如果我按F5（即重新加载相同的网址），会正确显示ItemDetail组件。

知道为什么会这样吗？两者的URL都相同。

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

（注意：如果我在开始时更改了所有路径以使用/，则导航非常破坏）

Answer 1

router.push()似乎仅使用绝对路径（带有前导/）。

使用上述相对路径导致URL更新，但路由器未更新，因此未显示页面。按F5键会导致加载完整路径，从而显示页面。

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

Router.push（）更改了URL但在404中被捕获。刷新相同的URL工作

1 个答案: