Docs

Docs

Defining Routes

Using the Route annotation to define route URLs.

You can use the @Route annotation to define any component as a route target for a given URL fragment.

For example, you can define the HelloWorld component as the default route target (i.e., empty route) for an application like this:

@Route("")
public class HelloWorld extends Div {
    public HelloWorld() {
        setText("Hello world");
    }
}

Example: Defining the SomePathComponent component as the target for the specific route "some/path".

@Route("some/path")
public class SomePathComponent extends Div {
    public SomePathComponent() {
        setText("Hello @Route!");
    }
}

Assuming your application is running from the root context, when the user navigates to https://example.com/some/path, either by clicking a link in the application or entering the address in the address bar, the SomePathComponent component is shown on the page.

If you omit the @Route annotation parameter, the route target is derived from the class name. The derived name is in lower case and the trailing View is removed. Also, MainView or Main names are mapped to root (value is "").

For example:

  • MyEditor becomes "myeditor"

  • PersonView becomes "person"

  • MainView becomes ""

Creating Route Aliases

You can also use @RouteAlias to create aliases for routes. A primary route created by @Route is required. It’s possible to create multiple aliases for a route.

Example: Adding two @RouteAlias annotations for HomeView. Navigating to "home" or "main" navigates to the same view as the main route.

@Route("")
@RouteAlias("home")
@RouteAlias("main")
public class HomeView extends Div {
    public HomeView() {
        setText("Hello @Route!");
    }
}

693776E5-D147-403A-A01D-04A3E9BF46AC