Измените один из параметров в url с реакции-маршрутизатором v4

Question

У меня есть такой путь

/cities/:cityGuid/responses/:responseGuid

Когда пользователь меняет город, мне нужно заменить :cityGuid. Для смены города использовался компонент NavLink.

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

Для получения текущего URL мне нужно использовать location.pathname и заменить cityGuid в этой строке.

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

Каков наилучший способ сделать это?

Answer 1

Если вы хотите сохранить полное местоположение и изменить некоторые параметры, если вы находитесь во вложенном маршруте, вы можете сделать это с помощью pathToRegexp, url и path из match и pathname из location.

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;

Answer 2

import pathToRegexp from 'path-to-regexp';

const { match: { path, params } } = this.props;

pathToRegexp.compile(path)({
  ...params,
  cityGuid: 'newCityGuid',
})