After finding the route match, let use its data.
Basically, as in the most common case, we need to render a part of the screen
For that, let’s have another look at the route data.
You have guessed right, the router-outlet component need to render the component. It gets the route data found according to the URL, and will use custom element (note the “is” attribute, it is still a custom element) and simply render it inside. All it needs to do, is simply call the createElement method of document
What about url parameters?
After finding the matched route, we need to replace its parameters, if any, with values from the url. The parameter is built in the following way:
The object returned is a key/value dictionary of {…parameter: parameterValue}
Now, all we need is having the component use this parameter, which is as simple as the following gist.
Wrapping up
We have managed to render our component according to the suitable route, and use it’s parameter.
Next, we have to make sure that we can navigate to a url.
Full examples can be found here: https://github.com/ranwahle/image-gallery-webcomponents/tree/routing
