Basic Routing and Navigation

Introduction

Navigation is one of the most significant parts of web applications. Even though Single Page Applications do not have the concept of multiple pages there is always a requirement of moving from one view to another in a web application. 

For a successful application, the navigation elements should be clear and understandable. 

The process of defining the navigation element and the corresponding view is known as Routing.

In this article, we will cover the concept of Basic Routing and Navigation. 
 

Also see, Parallel Operating System

Basic Routing and Navigation 

Two very basic ways for navigating around the views in an application are:

👉  By interacting with the UI 

👉  By entering a URL to directly navigate to a specific view

When navigating through any components like buttons in a UI, the browser URL can be updated to get reflected in the current view. That specific view can be then seen through the link. 
 

Routing maps URLs to different views and resources for navigating directly to the desired content or functionality. Typically, the root route / displays the main view, whereas a route such as /details would display the details of a sub-view that displays a list of users, and a route with the Username as a parameter, such as /details/CoursesTaken would display all the courses taken.

For this article, we will have the routes in Java language only. 

In Java views, the @Route annotation is used to define a route for a view.

LoginScreen.java

@Route("/loginPage")
public class LoginPortal extends Div 
{
public LoginScreen() 
{
loginForm LoginScreen=new loginScreen();
        // Other Implementation
         add(LoginScreen);
}
}

You can also try this code with Online Java Compiler

Run Code

In basic navigation and Routing, the following features are supported:

🔥  Child routes, like details/coursesTaken and details/coursesDone.

🔥  Route aliases, like displaying /loginPage as the default view when /loginPage/details is searched.

🔥  Fallback routes, like displaying an error page for paths like loginPage/invaliduser.

🔥  Route parameters.

🔥  Redirects, like redirecting root loginPage/ to loginPage/details.