React Router - How to replace dynamically parameters in a string

Question

I have a set of dynamically parameters in the URL, ad example the user locale, that looks like that:

/en/homepage

In my router config JSON file, I have something like:

/:locale/homepage

Which is the best way in order to replace these parameters directly in React Router?

I've come up with this solution that looks to me very far away from a standard or portable solution:

const urlTemplate = '/:language/homepage';
const mappedUrl = pathToRegexp.compile(urlTemplate);
const url = mappedUrl({
  'language': this.props.match.params.language
})
this.props.history.push(url);

I'm able to retrieve the match parameters if the component is wrapped by withRouter ( HOC from React router ) and replace them with pathToRegexp ( pillarjs/path-to-regexp ), but if I need to use <Link to={}> in a stateless component it's very annoying.

Are there standard solutions in order to do that?

Thank you in advance :)

Answer 1

I used React Router's generatePath to update the path /map/:zoom/:lon/:lat/ when a user changes a Leaflet map view. Note that in my case I replaced the path rather than pushing it.

import { generatePath } from 'react-router';

function updatePath(lat, lon, zoom) {
  const path = generatePath(this.props.match.path, { lat, lon, zoom });
  this.props.history.replace(path);
}

Answer 2

I use a function that replaces the parameters of the route path with the arguments of the function using regex.

If a route is:

'/:language/homepage'

the function will replace :language with the parameter passed to the function.

Function

This is the function to replace the values in the path:

function getRoute(path) {
    let args = Array.prototype.slice.call(arguments, 1);
    let count = -1;
    return path.replace(/:[a-zA-Z?]+/g, function (match) {
        count += 1;
        return args[count] !== undefined ? args[count] : match;
    });
};

The key here is the regex /:[a-zA-Z?]+/g that only match strings that start with : and include any character between a-z and A-Z meaning that when the next / is found, it will finish the match, so it will replace all params defined like this.

This works for my specific usage of simple params, but if you need to add more characters to the matching regex you can do so (like numbers, underscores, etc).

Usage

It is used like this:

let newPath = getRoute('/:language/homepage', 'en');

and the result will be:

'/en/homepage'

Link example

It can be used for Links like this:

<Link to={ getRoute('/:language/homepage', 'en') }>

Multiple parameters in route

It accepts multiple parameters as well:

getRoute('/:id/:language/homepage/:value', 123, 'en', 'myVal')

this will return:

'/123/en/homepage/myVal'

Answer 3

React Router Dom params replacing function. Benefits:

• unlimited amount of parameters
• flexible for other libraries via optional prefix parameter
• handles both relatives and absolute urls

const repalacePathParams = (path, params, prefix = ':') => {
  let newPath = path

  Object.entries(params).forEach(([key, value]) => {
    newPath = newPath.replace(prefix + key, value)
  })
  return newPath
}

console.log(repalacePathParams('/profile/:id/:name', { id: '111', name: 'tim' })) 
//return '/profile/111/tim'

Answer 4

Well, not sure you still interested in answer, and also not sure that my answer will help you, but...

If your paths are simple such as in your example (I mean, they don't include regexps, such as /:locale/kappa([a-z]{2})), you can write this router-independent function, where you manually handle your path and replace parameters :)

function placeParams(pathRegex, params) {
  var segments = pathRegex.split("/")
  return segments.map(segment => {
    var offset = segment.indexOf(":") + 1
    if (!offset)
      return segment

    var key = segment.slice(offset)
    return params[key]
  }).join("/")
}

console.log(placeParams("/:locale/kappa", { locale: "en" }))

Answer 5

This is an improved answer that allow you to place optional parameters also.

function placeParams(pathRegex, params) {
  const segments = pathRegex.split("/");
  return (
    segments
    .map((segment) => {
      let offset = segment.indexOf(":?") + 1;

      if (offset) {
        let key = segment.slice(offset + 1);
        return params[key];
      }

      offset = segment.indexOf(":") + 1;
      if (!offset) return segment;

      let key = segment.slice(offset);
      return params[key];
    })
    .join("/")
    // Remove trailing "/"
    .replace(/\/+$/, "")
    // Remove redundant "/"
    .replace(/\/{2,}/, "/")
  );
}

console.log(placeParams("/:locale/user/:?name/:?lastname", {
  locale: "en",
  name: "Nady",
  lastname: "Shalaby"
}))