Navigation features in Lino React

Lino React does not use any Route component that comes with react-router-dom and does NOT do so for Lino React has its own controller for URL context.

The whole navigation is put together using three different kinds of JavaScript objects, they are: Context(), URLContextBase() (‘s subclass) and react context URLContextBase.Context. Below is the description of how they work together to control the whole App().

The primary object that controls all navigation features is the class described below.

Parameters to pass to the Context() constructor:

(Wherever it is said as React (capitalized), we mean Lino React; otherwise, we mean react (lowercase) as react framework from Facebook/Meta)

Asynchronicity is one of the most notable inherent features of JavaScript in a Browser DOM (document object model). While writing a DOM application, sometimes developers need to synchronize some actions. One such thing is window.onpopstate action. React depends on complex URL state to render specific database content on user’s need. Putting it all into the URL makes the URL look really ugly. So, we put it into URLContext. And to synchronize the browser navigation and React’s internal URL states, we wrap HashRouter and URLContext into NavigationControl.Context. All navigation should be done through singleton context can be referred to by App.URLContext or SiteContext.URLContext.controller.

It is advised to NOT modify the event listener for popstate defined in App.js. Instead, a developer mush define a popstate event handle following the signature given below.

Afterwards you can register the popstateHandle() by calling App.registerHandle() like so: App.registerhandle(‘popstate’, popstateHandle) also be sure to unregister it when you don’t need the popstateHandle() anymore, using: App.unregisterHandle(‘popstate’, popstateHandle).

react context

Can be created using React.createContext() call.

See: React context.

react component

Either a subclass of React.Component or a function component written using standard React JSX syntax.