Navigating Between Routes

Using the RouterLink Component

You can use the RouterLink component to create links pointing to route targets in your application.

Navigation with RouterLink fetches the content of the new component without reloading the page. The page is updated in place.

Example: Using RouterLink for a simple navigation target.

Java

void routerLink() {
    Div menu = new Div();
    menu.add(new RouterLink("Home", HomeView.class));
}
@Route(value = "")
public class HomeView extends Component {
}

Example: Using RouterLink for a navigation target with Route template route.

Java

void routerLink() {
    Div menu = new Div();
    // user/123/edit
    menu.add(new RouterLink("Edit user details",
            UserProfileEdit.class, new RouteParameters("userID", "123")));
    // user/edit
    menu.add(new RouterLink("Edit my details",
            UserProfileEdit.class));
}
@Route("user/:userID?/edit")
public class UserProfileEdit extends Div implements BeforeEnterObserver {
    private String userID;
    @Override
    public void beforeEnter(BeforeEnterEvent event) {
        userID = event.getRouteParameters().get("userID").
                orElse(CurrentUser.get().getUserID());
    }
}

Example: Using RouterLink for navigation targets, with typed URL parameters, where the navigation target class implements HasUrlParameter.

Java

void routerLink() {
    Div menu = new Div();
    menu.add(new RouterLink("Greeting",
            GreetingComponent.class, "default"));
}
@Route(value = "greet")
public class GreetingComponent extends Div
        implements HasUrlParameter<String> {
    @Override
    public void setParameter(BeforeEvent event,
            String parameter) {
        setText(String.format("Hello, %s!", parameter));
    }
}

Using Standard Links

It is also possible to navigate with standard <a href="company"> type links.

Standard links result in a page reload, but you can enable navigation without page reload by adding the router-link attribute, for example <a router-link href="company">Go to the company page</a>.

Server-Side Navigation

You can trigger navigation from the server side using UI.navigate(String), where the string parameter is the location to navigate to.

You can also use UI.navigate(Class<? extends Component> navigationTarget) or navigate(Class<? extends C> navigationTarget, RouteParameters parameters). This avoids having to generate the route string manually and triggers the browser location update and the addition of a new history state entry.

Example: Navigation to the company route target when clicking a button:

Java

NativeButton button = new NativeButton(
        "Navigate to company");
button.addClickListener(e ->
     button.getUI().ifPresent(ui ->
           ui.navigate("company"))
);

Example: Navigation to the user/123/edit route target when clicking a button:

Java

NativeButton editButton = new NativeButton(
        "Edit user details");
editButton.addClickListener(e ->
        editButton.getUI().ifPresent(ui -> ui.navigate(
                UserProfileEdit.class,
                new RouteParameters("userID", "123")))
);