2

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?

Sam
  • 532
  • 1
  • 5
  • 13
  • 1
    I haven't tried out v6 yet, but what I would do in v5 is to send all traffic matching `some-url` to one component. In that component you can access the complete path with the `useLocation` hook. – Linda Paiste Jun 21 '21 at 20:39
  • Thanks Linda -- yeah I imagine I'll just have to do some manual string parsing – Sam Jun 21 '21 at 23:51

1 Answers1

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.

JoelFan
  • 37,465
  • 35
  • 132
  • 205
  • Unless I'm misunderstanding, I believe this would fail if a user manually typed in that path, right? In other words, that's really only useful if we're redirecting with code? – Sam Jun 21 '21 at 23:50
  • @Sam, nope.... it doesn't matter if the user types it in to a browser or your code redirects it. A URL is a URL. – JoelFan Jun 22 '21 at 01:48