Work in progress

Defining Routes With @Route

The @Route annotation allows you to define an arbitrary component as a route target for a given URL fragment. For example:

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

This defines the HelloWorld component as the default route target for the application (empty route). You can define a separate component for a different route like this:

public class SomePathComponent extends Div {
  public SomePathComponent() {
    setText("Hello @Route!");
  • Assuming your app is running from the root context, when the user navigates to, 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 leave out the parameter to a Route annotation, the route target will be derived from the class name. For example MyEditor will become "myeditor", PersonView will become "person" and MainView will become "".

For nested route definitions see: ParentLayout route control using @RoutePrefix