reactjsreact-routerreact-router-domreact-router-componentconnected-react-router

How do you pass ":" in a URL without referring to a dynamic value in React?

The problem is that when you want to introduce a dynamic value to a url is that you have to use ":" to refer to it.

For example, let's say I have a list with a lot of users and I add a button to get more info about them, and I want the URL to have the username of the user from where you're getting all the info. I would do something like this:

<Route path="/user/:name" component={Component} />

The problem occurs when, I have to, for some reason, put ":" in the URL without it meaning that I want that part of the URL to change. Basically to have a static URL with ":" in it.

Is this possible and if so, how would I do this?

Solution

  • React-router uses path-to-regexp. So you can escape it by using escape character.

    <Route path="/user/\\:name" component={Component} />