Use a path (with "/") as a param in a URL

Question

I'm using React Router v6 (Beta) and have a requirement to allow a path as a param, eg.

"some-url/:folderPath" -> "some-url/some/path/to/a/folder"

This is proving trickier than I expected, though I recognize the obvious confusion caused by slashes being URL delimiters. I found this answer that suggests that at some point React Router allowed for a "+" that would allow the URL param to include everything following that point in the URL, though it no longer appears supported.

Is there an explicit way to approach this problem using the React APIs?

Answer 1

You can encode any character using URL encoding. The encoding for forward slash is %2F. If you replace all the slashes with %2F it should work. You can also call a function that will URL-encode a string.

See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

EDIT: That being said, the comment by @Linda Paiste is a superior solution.