Clarify routing instructions and simplify hint

Updated the wording for clarity and removed redundant hint.

Author: sofietoft

17/umbraco-cms/customizing/foundation/routes.md

@@ -19,7 +19,11 @@ Depending on which section you are working on, there are different options:
 
 ### Building routing
 
-Almost any component can host routable sub-components by defining a list of routes and render a `umb-router-slot` element. Let's assume we have a **custom section** with pathname `custom-section` and a **section view** with pathname `organization`. In this context we can create an element with routes, like this:
+Almost any component can host routable sub-components by defining a list of routes and rendering a `umb-router-slot` element. Let's assume we have a **custom section** with pathname `custom-section` and a **section view** with pathname `organization`. In this context, we can create an element with routes, like shown below.
+
+{% hint style="info" %}
+The order in which the routes are defined is important as the first match will be used. So make sure to add more specific routes in the beginning.
+{% endhint %}
 
 ```typescript
 @state()
@@ -49,10 +53,6 @@ _routes: UmbRoute[] = [
 ];
 ```
 
-{% hint style="info" %}
-The order in which the routes are defined is important as the first match will be used. So make sure to add more specific routes in the beginning.
-{% endhint %}
-
 In the render method of the element, render the `umb-router-slot`:
 
 ```html