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}给我们提供“调查/ june”，然后我们将id解析为它：然后我们得到调查/ june / 123 但是当再次从侧边栏{match.url}单击链接时，将为我们提供'surveys / june / 123'而不是'survey / june'，您将其再次解析为id，最终将得到您得到的结果。我希望你很清楚一个简单的解决方案是通过这种方式使用链接：

errors.ts:30 ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at Object.exports.subscribeTo (subscribeTo.ts:27)
    at Object.subscribeToResult (subscribeToResult.ts:36)
    at SwitchMapSubscriber._innerSub (switchMap.ts:139)
    at SwitchMapSubscriber._next (switchMap.ts:128)
    at SwitchMapSubscriber.Subscriber.next (Subscriber.ts:99)
    at AsyncAction.dispatch (interval.ts:75)
    at AsyncAction._execute (AsyncAction.ts:122)
    at AsyncAction.execute (AsyncAction.ts:97)
    at AsyncScheduler.flush (AsyncScheduler.ts:58)
    at ZoneDelegate.invokeTask (zone.js:421)

Answer 2

match.url包含参数，而match.path不包含参数。

执行此操作

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

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

path-（字符串）用于匹配的路径模式。对建筑有用嵌套s

url-（字符串）URL的匹配部分。有用用于构建嵌套s

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

2 个答案: