时间戳

首页 > 解决方案 > 反应路由器动态路由未按预期生成

javascript - 反应路由器动态路由未按预期生成

问题描述

我在我的项目中使用 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,
});

他们都不工作。我究竟做错了什么？

标签： javascriptreactjsreact-router

解决方案

因为你每次都得到匹配的 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}`} />

推荐阅读