From 0638180343f96fee768d707de34d29455b27ab31 Mon Sep 17 00:00:00 2001
From: ItalyPaleAle <43508+ItalyPaleAle@users.noreply.github.com>
Date: Wed, 4 Nov 2020 21:36:59 -0800
Subject: [PATCH] Added docs on using named capturing groups Fixes #158

---
 README.md | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 70b7a32..22fa8c4 100644
--- a/README.md
+++ b/README.md
@@ -329,7 +329,7 @@ import active from 'svelte-spa-router/active'
 
 The `active` action accepts a dictionary `options` as argument:
 
-- `options.path`: the path that, when matched, makes the link active. In the first example above, we want the link to be active when the route is `/hello/*` (the asterisk matches anything after that). As you can see, this doesn't have to be the same as the path the link points to. When `options.path` is omitted or falsey, it defaults to the path specified in the link's `href` attribute. This parameter can also be a regular expression that will mark the link as active when it matches: for example, setting to the regular expression `/^\/*\/hi$/` will make the link active when it starts with `/` and ends with `/hi`, regardless of what's in between.
+- `options.path`: the path that, when matched, makes the link active. In the first example above, we want the link to be active when the route is `/hello/*` (the asterisk matches anything after that). As you can see, this doesn't have to be the same as the path the link points to. When `options.path` is omitted or false-y, it defaults to the path specified in the link's `href` attribute. This parameter can also be a regular expression that will mark the link as active when it matches: for example, setting to the regular expression `/^\/*\/hi$/` will make the link active when it starts with `/` and ends with `/hi`, regardless of what's in between.
 - `options.className`: the name of the CSS class to add. This is optional, and it defaults to `active` if not present.
 
 As a shorthand, instead of passing a dictionary as `options`, you can pass a single string or regular expression that will be interpreted as `options.path`.
@@ -358,7 +358,7 @@ routes.set(/^\/buongiorno(\/([a-z]+))/i, Name)
 routes.set('*', NotFound)
 ````
 
-When you define routes as regular expressions, the params prop is populated with an array with the result of the matches from the regular expression.
+When you define routes as regular expressions, the `params` prop is populated with an array with the result of the matches from the regular expression.
 
 For example, with this `Name.svelte` route:
 
@@ -370,7 +370,18 @@ export let params = {}
 </script>
 ````
 
-When visiting `#/hola/amigos`, the params prop will be `["/hola/amigos","amigos"]`. This is consistent with the results of [`RegExp.prototype.exec()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec).
+When visiting `#/hola/amigos`, the params prop will be `["/hola/amigos","amigos"]`.
+
+This is consistent with the results of [`RegExp.prototype.exec()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec).
+
+> When defining a route using a regular expression, you can optionally use [named capturing groups](https://2ality.com/2017/05/regexp-named-capture-groups.html). When using those, in addition to finding your matches in the `params` prop, you can find the matches for named capturing groups in `params.group`.  
+> For example, consider the route:
+>
+> ```js
+> routes.set(/^\/book\/(?<title>[a-z]+)$/, Book)
+> ```
+> 
+> When visiting `/#/book/mytitle`, the `params` prop will be an array with `["/book/mytitle", "mytitle"]`, and `params.groups` will be a dictionary with `{"title": "mytitle"}`.
 
 ## Advanced usage