Question

我的路线配置如下：

[
    {
        path: '/',
        exact: true,
        component: Dashboard
    },
    {
        path: '/stories/:storyId',
        component: Story,
    },
    {
        component: Dashboard,
        status: 404
    }
]

现在在Story组件内部，我想渲染一个图库，每张照片都需要有自己的网址。做了这样的事情：

<Switch>
    <Redirect from={match.url} to={`${match.url}/1`} />
    <Route path={`${match.url}/:photoId`} render={this.renderGallery } />
</Switch>

不幸的是，它进入无限循环导致match.url在重定向后永远不会改变。

有人可以帮我这个吗？谢谢

Answer 1

from上的<Redirect>默认匹配松散。正如你所拥有的那样，它将匹配任何以match.url中的内容开头的内容，其中包含$ {match.url} / 1路径。

在Switch内部，它实际上直接读取其子项的道具，并不区分组件的类型。所以，you can use exact and strict就像你在路线上一样。

因此，这应该适合你：

<Switch>
  <Redirect exact from={match.url} to={`${match.url}/1`} />
  <Route path={`${match.url}/:photoId`} render={this.renderGallery } />
</Switch>

反应路由器v4嵌套

1 个答案: