带有可选路径参数的 react-router generatePath()答案

【问题标题】：react-router generatePath() with optional path params带有可选路径参数的 react-router generatePath()
【发布时间】：2021-06-20 09:35:18
【问题描述】：

我的路径类似于to/:param/(optional)?/:optionalParam?，所以当我使用generatePath() 时，就像：

generatePath('to/:param/(alsoTo)?/:optionalParam?', {
  param: 'abc',
  optionalParam: 'xyz',
});

我得到类似to/abc/xyz 而不是to/abc/alsoTo/xyz 的东西（前者在路径中错过了alsoTo）。

我应该怎么做才能在生成的路径中同时获得to/abc/alsoTo/xyz 和/alsoTo/？

我正在使用 react-router v5。

【问题讨论】：

【解决方案1】：

当您将alsoTo 传递给generatePath 时，不要将其作为参数，即

generatePath('to/:param/alsoTo/:optionalParam?', {
  param: 'abc',
  optionalParam: 'xyz',
})

当然，如果你想有条件地添加alsoTo，作为参数传递

generatePath('to/:param/:alsoTo(alsoTo)?/:optionalParam?', {
  param: 'abc',
  optionalParam: 'xyz',
  alsoTo: someValueForAlsoTo,
});

params 对象中alsoTo 的值必须是'alsoTo' | undefined，否则会报错。

【讨论】：