CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
KillMe
KillMe

Reputation: 194

How to validate URLs with react-router-dom?

How can I validate URLs with custom regex in react-router-dom?

I tried the following approach but it didn't seem to work

<Route path="to/page/:path(regex)" component={MyPage}/>

but it doesn't seem to work. It redirects to the Error page instead. I'm trying to check if :path is UUID or not. The regex is /^[0-9A-F]{8}-[0-9A-F]{4}-[5][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i

Upvotes: 1

Views: 1335

Answers (1)

Drew Reese
Drew Reese

Reputation: 203476

The "regex" that goes in the path isn't an actual REGEX object/literal, it's just a regex syntax string that the path-to-regexp package that react-router-dom@5 can use and parse.

For your example you can remove the leading "/^" and trailing "$/i" and it should work for you.

Example:

<Route
  path="/to/page/:path([0-9A-F]{8}-[0-9A-F]{4}-[5][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12})"
  component={MyPage}
/>

Edit how-to-validate-urls-with-react-router-dom

Upvotes: 1

Related Questions