⚠️ This lesson is retired and might contain outdated information.

Use Regular Expressions with Routes with React Router v4

Joe Maddalone
InstructorJoe Maddalone
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 2 years ago

We can use regular expressions to more precisely define the paths to our routes in React Router v4.

[00:00] Using regular expressions, we can more precisely validate our route parameters. Here, on the page, we've got a very simple route with a parameter of a as well as a parameter of b. Then in the JSX, I'm simply outputting those. If I go to /a/b, we can see our param of a and our param of b.

[00:20] However, let's say that I only want to validate a if it is a number. Right here, after the parameter definition, in parenthesis I can use regular expression to say that I want this to be any number of digits. When I save that now, our path is not going to match, but if I change our a parameter to 1, 2, 3, we can see our a parameter has been validated.

[00:43] If I wanted to say, "Well, that needs to be two digits" and save that, and here I'll change that 02, we can see again our parameter of a has been validated. We can go further with this.

[00:56] If I wanted this to be similar to a date, so I could say it's two digits followed by a dash followed by two digits followed by a dash followed by four digits. Save that. Now here we're going to do 02-28-2017. We can see that our a parameter again matches the specified regular expression.

[01:21] To take this a little bit further, let's break this out a little bit. Our b path, let's go ahead and get rid of this forward slash. We've still got our b parameter. I'm going to say that it needs to equal a dot followed by any number of alpha characters. I'm going to save that.

[01:44] Clearly, this isn't going to match, but if I changed this path to our date path .html, everything is going to work.

egghead
egghead
~ 10 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today