DEV Community

Andrew Elans
Andrew Elans

Posted on • Updated on

Power Pages SPA: fragment-based routing

Rev 01 note

Some parts of this article are updated 09.08.2024 to conform with the RFC3986 Uniform Resource Identifier (URI) standard.


Example URI

Ref Section 3 of RFC3986:

     foo://example.com:8042/over/there?name=ferret#nose
     \_/   \______________/\_________/ \_________/ \__/
      |           |            |            |        |
   scheme     authority       path        query   fragment
Enter fullscreen mode Exit fullscreen mode

Possible routing options

Path-based
https://your.powerappsportal.com/suppliers?name=valves&status=active
https://your.powerappsportal.com/frame-agreements

Fragment-based
https://your.powerappsportal.com/?name=valves&status=active#suppliers
https://your.powerappsportal.com/#frame-agreements
Enter fullscreen mode Exit fullscreen mode

Routing in Power Pages SPA

I couldn't set up the path-based routing with Power Pages due to inability to change the server-side functionality, so I will implement the fragment-based routing instead adding query parameters with History API to maintain:

  1. Back and forward navigation based on user's search activity on a page
  2. Navigation to a specific search result (share a link to a supplier, save in favourites, etc.)

So I will be making fragment-based routing as follows:

https://your.powerappsportal.com/?name=valves&status=active#suppliers

Continued in the next part of this series.

Top comments (0)