Basic Routing & Navigation

Understanding the basics of the routes of views, URLs and navigation.

Each view has a route through which it can be accessed. A URL is used to select the required route. Interaction with the application includes navigation between the different views.

You can navigate around the views in an application in two basic ways: either by interacting with the UI or by entering a URL to directly navigate to a specific view. When navigating with buttons or other components in a UI, the browser URL can be updated to reflect the current view. The user can then copy or link the URL to give direct access to the specific view.

Routing URLs to content

Routing maps URLs to views or resources to navigate directly to the desired content or functionality. Typically, the root route / shows a main view, a route such as /users could show a sub-view that displays a list of users, and a route with the user ID as a parameter, such as /users/dadams, would show a specific user.

You can have routes to views written in either Java or TypeScript, and you can mix them in the same application. While Java views require a server connection, TypeScript views also work offline.

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

@Route("/login")
public class LoginScreen extends Div {
    public LoginScreen() {
        LoginForm loginForm = new LoginForm();
        // Implementation details omitted
        add(loginForm);
    }
}

See Creating a Main View for an introduction to creating a main view with a menu bar to select from a set of sub-views. To navigate to a view, you need to get a link to the view.

The following features are supported:

Child routes, such as /main/users and /main/premises.
Route aliases, such as showing /main/users as the default view when /main is entered.
Fallback routes, such as showing an error page for a path such as /users/invaliduser.
Route parameters, such as /users/:userid to catch URLs such as /users/dadams.
Redirects, such as redirecting root route / to /login.

99AFCB95-B7F9-4C8A-898F-7FFF7BDA0743

Docs

Docs

Basic Routing & Navigation