generatePath
On this page

generatePath

Summary

Reference Documentation ↗

Returns a path with params interpolated.

Param values are percent-encoded for use in a path segment: characters that would change the URL structure (/, ?, #, %, whitespace, non-ASCII) are escaped, while characters that RFC 3986 allows literally in a path segment ($ & + , ; = : @) are kept as-is. Note this differs from query-string encoding (encodeURIComponent/URLSearchParams), where those characters are delimiters and must be escaped. Splat (*) values are encoded per segment, preserving / separators.

See RFC 3986 §3.3

import { generatePath } from "react-router";

generatePath("/users/:id", { id: "123" }); // "/users/123"
generatePath("/files/:name", { name: "a b" }); // "/files/a%20b"
generatePath("/releases/:v", { v: "1.0.0+1" }); // "/releases/1.0.0+1"

Signature

function generatePath<Path extends string>(
  originalPath: Path,
  params: GeneratePathParams<Path> = {} as any,
): string

Params

originalPath

The original path to generate.

params

The parameters to interpolate into the path.

Returns

The generated path with parameters interpolated.

Docs and examples CC 4.0
Edit