Nagivation

A special feature of Pages are that they can benefit from Layouts to automatically add a parent container with common pieces of UI/State that’s shared throughout the application - like Headers and Footers. The Layouts section goes into more detail on this approach.

A Page needs to be added to the Router before it can be previewed within a web browser.

Technical

Each generated context is contained within the sub-folder src/contexts directory. The context will provide high order functions that will help you to inject global state within you Class based components. It will also provide you will hooks for you to use in your function based components.

• [page].vue: This contains the Vue template markup used to implement the structure and layout of a Page. It is a mix of HTML and special Vue syntaxes which allow declarative databinding and structural manipulation.
• [page].ts: This contains the TypeScript controller which provides the procedural code-behind logical needed to add integrations to a page. Through this file you may expose data and handle events generated by Page elements.
• [page].scss: This contains the SASS stylesheet to be applied to the page - and that page only. The styles within this file are scoped, meaning they cannot be used to target any elements except those defined directly within the [page].vue template file.

Scoped CSS may seem weird at first because regular CSS operates with global impunity, however it is a great approach for compartmentalizing styles so they do not jump their intended scope and affect other elements. Global level styles can be added in the Theme directory.

• [page].spec.ts: This contains the unit-level tests for the page. Read the testing section for more details about writing tests.

Routing

In order to determine the Pages that get loaded for a particular path within the browser, Routes are setup to create the respective mappings.

Below is an example of a Route definition for a sample Login page:

<Stack.Navigator screenOptions={{ headerShwon: false}} initialRouteName='Login'>  <Stack.Screen name="Login" component={Login} /></Stack.Navigator>

The name field provides an alternative means of identifying and navigating to defined pages programatically. This approach is preferable because the route names can be externalized into global constants and shared throughout your code for navigational consistency.

The component property specifies the Screen component to load for the given name.

Navigation should be centralized within the src/core/navigation directory. This is where the React Navigation library is configured and where the Stack.

For more details on the available options for configuring a Stack, please refer to the React Navigation documentation, and more specifically, the API Definition.