反應路由器動態路由未按預期生成

Question

我在我的項目中使用 react-router-dom 和 webpack 。 當用戶根據日期和 ID 點擊某個鏈接時，它會將他們帶到另一個頁面。

我的路線：

 <Switch>
  <Route path="/" exact render={Home} />
  <Route exact path="/surveys/:date" render={Main} />
  <Route path="/surveys/:date/:id" render={Survey} />
  <Route render={() => <h1>404: page not found</h1>} />
</Switch>

我希望路徑看起來像這個surveys/june/123 ，它在第一次點擊時工作正常。 但問題是，當用戶從側邊欄加載另一個調查時，而不是 url 更改為surveys/june/124它更改為surveys/june/123/124 ，之后它將更改為surveys/june/123/125和很快。 例如，第一個加載的 id 始終保留在 url 中。

我努力了：

<Link to={`${match.url}/${id}`} />

和path-to-regexp

const setPath = compile(match.path);
const newPath = setPath({
      ...match.params,
      id: id,
});

他們都不工作。 我究竟做錯了什么？

Answer 1

因為您每次都會得到匹配的 URL。 在您的第一次嘗試中，您告訴 react 采用匹配的 URL 並為其添加一個 id。 如果我們假設 {match.url} 給我們 'surveys/june' 然后我們將 id 解析為它：然后我們得到surveys/june/123 但是當從側邊欄再次單擊鏈接時 {match.url} 給我們'surveys /june/123' 而不是 'survey/june'，您再次將其解析為 id，最終產生您得到的結果。 我希望你很清楚一個簡單的解決方案是這樣使用鏈接：

<Link to={`surveys/${date}/${id}`} />

Answer 2

match.url包含參數，而match.path不包含參數。

做這個

<Link to={`/${match.path}/${match.params.date}/${id}`} />

https://reacttraining.com/react-router/core/api/match

path - (string) 用於匹配的路徑模式。 用於構建嵌套的 s

url -（字符串）URL 的匹配部分。 用於構建嵌套的 s