'React react-router-dom question how to have "/" treated as a string in the url route

I am trying to have URLs be unique identifiers in my route. This requires "/" be treated as strings somehow. I was wondering if someone knew how this could be done?

Here is an example of the code.

<Routes>
   <Route path=":url" element={<UrlPage />}} />
</Routes>

So lets say we go to www.website.com/https://stackoverflow.com/questions/ask

I would want "https://stackoverflow.com/questions/ask" to be the URL. How do I get the entire "https://stackoverflow.com/questions/ask" to be treated as string by react router.

Update: The following will treat everything a string but if a URL has a ? everything to the right will be ignored.

<Routes>
   <Route path="*" element={<UrlPage />}} />
</Routes>


Solution 1:[1]

This isn't a good idea in general - not only will you have to set this up serverside to deploy this somewhere, but URLs containing / shouldn't be used as subdirectories.

If you really need to, I would URL-encode the address first like this:

www.website.com/https%3A%2F%2Fstackoverflow.com%2Fquestions%2Fask

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mitchazj