UNIQUE FEATURE: Disconnected pieces of user interface

[webJose]

Disconnected pieces of user interface refers to the ability of showing UI pieces for a given route in different places in the HTML markup, allowing non-route UI to "get in the middle".

Tip

This is something unique to this router. As far as I can tell, no other router has this feature.

This is done easily. For example, the demo project in this repository does it: When selecting hash or path routing from the navigation bar, you'll notice that the link "expands". This expansion is a piece of UI that becomes visible when the route becomes active. Then the document "resumes" its markup with non-route UI, until the point where the main content is reached (a <main> HTML element). Here, another "piece" of UI that has appeared for the route is shown.

Feel free to look at the demo's code. The NavBar component has one piece, while the App component has the other piece.

Basic Example

<Router>
  <Route key= "somePath" path="/some-path">
    <p>First piece!</p>
  </Route>
  <p>This paragraph is always visible.  It does not belong to any route.</p>
  <Route key="somePath">
    <p>This is the second piece!  Simple, right?  We just refer to the same key.
  </Route>
</Router>

---

Disconnected pieces allow you full flexibility on how you design the user interface. It works with fallback content, too:

<Router>
  <Route key= "somePath" path="/some-path">
    <p>First piece!</p>
  </Route>
  <Fallback>
    <h1>Not Found!</h1>
  </Fallback>
  <p>This paragraph is always visible.  It does not belong to any route.</p>
  <Route key="somePath">
    <p>This is the second piece!  Simple, right?  We just refer to the same key.
  </Route>
  <Fallback>
    <NotFoundFooter />
  </Fallback>
</Router>