Skip to content

prashantk0001/lwc-router

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

lwc-router

Simple Router For Standalone LWC Single Page Application that works with communities, standalone lightning/aura applications.

lwc-router

Maps a URL to lightning component that essentially represents a page/module in SPA.

For this specifically, salesforce does not provide any routing even for LWC in lightning experience (similar to navigate to component for aura components) let alone in a standalone application.

Keeping this in mind, here's lwc-router, which registers your components as URL accessible components and even works when you bookmark them!!

Installation:

Get all the LWC and apex classes deployed in your org and you're all set!

Alternatively, copy all contents under force-app/main/default/ to try the provided example.

Get Started:

At the core of lwc-router is routerModule, here's all the exports that might help you with implementation.

routeMeTo (function) - updates app URL and updates UI getURLParams (function) - returns map of all current page params fetchCurrentPageState (function) - returns current page state getPageName (function) - returns current page 

To register a component as page:

c-router-module has two duties, as a root it behaves as container for all your page level components and as a registrar it can register them as a page,

root requires no attributes registrar component - will require "register-page" attribute which represent a pagename and maps passed component with that pagename in url. -set "is-default" attribute as true on registrar when registering home component

 <c-router-module> <!--root c-router-module component , should be created only once--> <!-- registrar c-router-module components should register all pages at once --> <c-router-module register-page="home" is-default="true"> <c-router-test-home></c-router-test-home> <!-- component that represents a page "register-page" - is the page name that will be registered for this component and will be present in URL as queryparam "page=home" --> </c-router-module> <c-router-module register-page="contacts"> <c-router-test-contacts></c-router-test-contacts> <!-- component that represents a page --> </c-router-module> </c-router-module> 

To route to a page:

arg0: pageName (String) - is mandatory and should be a registered pagename arg1: state (Object) - to set a state to new page arg2: params (Object) - to add additional params

routeMeTo('contacts', {}, { listview : 1 }); //resultant url: "/SimpleRouterApp.app?page=contacts&listview=1" 

Well, that's it!! simple, happy routing!