陣營路由器V4嵌套

Question

我的路由配置是這樣的：

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

現在故事構件的內部我想呈現一個畫廊，每一張照片都需要有自己的網址。有這樣的事情：

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

不幸的是，它進入一個無限循環，導致match.url在重定向後永不改變。

有人可以幫助我嗎？謝謝

Answer 1

<Redirect>上的from默認匹配鬆散。正如你所擁有的，它將匹配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>