Defining Routes

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

Example: Defining the HelloWorld component as the default route target (empty route) for your application.

@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 http://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. For example:

  • MyEditor becomes "myeditor"

  • PersonView becomes "person"

  • MainView becomes ""