You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ha...@apache.org on 2020/08/17 09:28:36 UTC

[royale-docs] 04/04: Filled in routing page.

This is an automated email from the ASF dual-hosted git repository.

harbs pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/royale-docs.git

commit b46b12b801556b163575596084aa8717f6d259d6
Author: Harbs <ha...@in-tools.com>
AuthorDate: Mon Aug 17 12:28:18 2020 +0300

    Filled in routing page.
---
 features/routing.md | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/features/routing.md b/features/routing.md
index 1d808c3..dc002f2 100644
--- a/features/routing.md
+++ b/features/routing.md
@@ -26,10 +26,23 @@ Map URL parameters to different initial values in the app, and vice versa
 _this page is not complete_
 
 ## Basic Router
+
+There are two types of routing. Routing can be completely within the browser and in that case, the routing is handled in the portion of the URL after the hash (`#`). This is called "hash routing" or `HashRouter`. A more complex form of routing can be used which is indistinguishable from separate path-based web pages. This (for lack of a better term) is called browser routing `BrowserRouter`. To use browser routing, your server must be setup to support this.
+
+`HashRouter` can be used with, or without "hash-bangs" A hash-bang (`#!`) is a special notation to search engines that the hash should be treated as a page to be indexed by the search engine. Regular hashes will work the same, but will generally not be searchable. Hash-bangs can be enabled or disabled using the `useHashBang` property.
+
+`BrowserRouter` requires a `basePath` to function correctly. This is the path relative to the domain where the application is loaded. Anything below that path will be considered a "routing" path. The base path needs to match the settings on the server. There are many guides on the web on how to setup your server [here's one](https://www.digitalocean.com/community/tutorials/react-react-router-ssr). Any instructions for setting up a particular server to work with Angular or React (or most  [...]
+
+On the most basic level, routers (whether hash based or path browser based) can be used by manually reacting to router state changes.
 ````
-<js:Router id="router" stateChange="hashChanged()"/>
+<js:HashRouter id="router" stateChange="hashChanged()"/>
 ````
-In the above example, any time the route changes, the `stateChanged` function will be called.
+
+````
+<js:BrowserRouter id="router" stateChange="hashChanged()"/>
+````
+
+In the above examples, any time the route changes, the `stateChanged` function will be called.
 
 The state of the router can likewise be changed directly by modifying the `router.routeState` and calling `router.setState()` `router.renderState()` is a similar method, but it will dispatch the `stateChanged` event as well and cause any attached beads to react to the state change.
 
@@ -44,9 +57,9 @@ The full power of the Router becomes apparent when you use beads. Router can aut
 
 In this example, the router syncs the state of the footer with the route path. The RouteTitleLookup allows changing the window title based on the state. The `lookup` property is an object whose keys are the state names and the values are the corresponding titles.
 
-Routers and RouteTotState can be declared on and for more than one component, so state can be changed and synced across multiple components with ease.
+`Router`s and `RouteToState` can be declared on and for more than one component, so state can be changed and synced across multiple components with ease.
 
-Another example which routes to components: (in progress)
+Another example which routes to components:
 ````
 <js:Router localId="router">
     <js:RouteToComponent component="{footer}"/>
@@ -54,4 +67,11 @@ Another example which routes to components: (in progress)
 </js:Router>
 ````
 
+The currently supported beads are the following:
+### `RouteToComponent`
+### `RouteToParameters`
+### `RouteToState`
+### `SetRouteTitle`
+### `PathRouteBead`
+
 *Instructions and sample code will appear here soon to show how you can map URL parameters to different initial values in the application, and vice versa.*