Path to Regular Expressions

[00:00:00]
>> Evan You: We've implemented some pretty rudimentary routing. If all your app needs to do is just switching between top level pages, we've essentially achieved the goal. But in reality routing is much more complicated than that. Imagine you have URLs like,
>> Evan You: Foo/123. It's very common to say user username or, right?

[00:00:30]
You have all these dynamic segments here, and if you've used a rounder before you know that common convention is to denote a dynamic segment starting with a colon. So a URL pattern like this means we want to match anything that starts with user and this part can be anything.

[00:00:54]
And also, we want to extract this dynamic segment, and pass it to our component as a prop or as some sort of data. The component needs to be able to access and know like the current, what the current dynamic segment is. And so in reality, this will match something like this, where your component will probably get an object like this.

[00:01:23]
Which is the dynamic data that's associated with the current route. And then, imagine if you have something like this. Then you probably expect something like path, user/123, Then this is considered something like parans, and query is foo bar. So essentially, we're translating a raw URL into a JavaScript data structure that's easier for our components to consume, right?

[00:02:09]
Instead of having to part it everywhere. So this is very common need and in the next section, I will try to deal with some of it. We're not going to like construct a full like route object like this. What we want to do is really just be able to mesh dynamic paths like this.

[00:02:36]
And being able to extract the user name 1, 2, 3 part and pass it to our component. So we want is essentially this, okay. So how do we do this? This involves some advanced parsing. You need to somehow write a parser that knows how to parse a URL and figure out these dynamic segments.

[00:03:04]
And then figure out how to match this incoming raw path to this patent, and extract this username. So seems like there could be some way you can probably handwrite a regular expression to do that. But we want this whole process to be automatic. So we need something to convert these patents into regular expressions.

[00:03:28]
That can help us do the parsing at run time. And luckily, you don't have to write that yourself. There is an existing library that does a pretty good job at this and that library is called path to regexp. So if you look it up on Google, path to regexp, this is where it shows up.

[00:03:56]
So it's a pretty popular package. It's used in quite a few router implementations. And the API though, is not super straightforward. Well, it's actually pretty straightforward. So, API looks like this. Obviously, it exposes a function called, pathToRegexp, and you need to pass your pattern, as the first argument into it.

[00:04:27]
The weird thing is you also need to pass in a keys array. So this array will be used to fill in the dynamic segments, if there are any. So see there, there is a dynamic segment bar. After we get the regexp, we also have this keys array filled up with an object.

[00:04:53]
And this object has a name, bar, prefix / delimiter / optional, blah, blah, blah. So most of these, you don't really need to worry about. The information that we need is that there is one dynamic segment and its name is bar, okay? And this corresponds to when you execute this regular expression on an incoming raw path.

[00:05:21]
If you've worked with JavaScript regular expression before, you know if it matches it will return an array. And this array will contain, if you have capture groups inside your regular expression, this array will, in addition to the whole matching string as a first element in the array. It will be followed by all these capture groups, the strings that's matched by this capture groups, so those capture groups will correspond to this keys array.

[00:05:53]
So if you execute this on imagine path, you will get an array which first element is the full path and second element will be the content that matches the bar segment. So this might be a bit abstract to talk about, so we'll go into the code to just quickly show you how the thing works.

[00:06:20]
So let's say, const keys equals this. So if you use latest repository, we already linked path to regexp onto the page so you can access directly. So pass to regexp, foo bar keys, and
>> Evan You: Okay. And let's make this, so you can either do this.
>> Evan You: Foo 123.

[00:07:08]
>> Evan You: Okay, so if we do this now and it matches, result will be an array that looks something like this. It will be foo123123, like this. I probably should just hide it. Okay, and the keys will look like something like this, name bar. Or ignore all the fields that we don't care about.

[00:07:43]
So keys is this and the result is this, so what you want to do is to slice off the result. Just remove the first element. And now, we can use these to erase, to construct a parents object into this.
>> Evan You: So in order to eventually obtain this object, in order to feed it to our components, this is what we need to do.

[00:08:15]
We need to take the raw matching result and the keys, and somehow iterate over them eventually construct an object like this, okay.