reactjs - 使用 react-router v4 更改 url 中的参数之一

Question

我有一条这样的路

/cities/:cityGuid/responses/:responseGuid

当用户改变城市时，我需要更换 :cityGuid .更改城市使用 NavLink成分。

<NavLink to="current url with changed cityGuid" text="Moscow" />

要获取当前网址，我需要使用 location.pathname并替换 cityGuid在这个字符串中。

current url: /cities/londonCityGuid/responses/abc1
user change city
next url is: /cities/moscowCityGuid/responses/abc1

做这个的最好方式是什么？

Answer 1

如果您想保留完整位置并在嵌套路由中更改一些参数，则可以使用 pathToRegexp、url 和匹配路径以及位置路径名来完成。

const ParamLink = ({
  children,
  match: { url = '', path = '', params: currentParams = {} } = {},
  location: { pathname = '' } = {},
  params = {}
}) => {
  const urlPartToInsert = pathToRegexp.compile(path)({
    ...currentParams,
    ...params
  });
  const to = pathname.replace(url, urlPartToInsert);
  return <Link to={to}>{children}</Link>;
};

export default ParamLink;