Defining Routes

Navigating Between Routes ⚙️

Switching between routes/views may be done in two ways: programmatically with UI.navigate() methods or manually with links. The navigate() method is more flexible for a Java programmer since the view change may be given from anywhere in your code, and you can interact with the target view. On the other hand, links are the natural online method of going from one view to another, allowing you to share the direct link to a specific view with a colleague, for example, and they operate even after the session has ended.

🔖Server-Side Navigation

Various UI.navigate() methods can be called from server-side code to initiate navigation.

You should generally use the UI.navigate(Class? extends Component> navigationTarget) or navigate(Class? extends C> navigationTarget, RouteParameters parameters) methods, which take the target view's Class as an argument. When compared to String versions, this eliminates the need to manually build the route string.

The navigate() method in the browser causes a location update and the creation of a new history state record, but it does not cause a full page refresh.

Button button = new Button("Navigate to Home page");
button.addClickListener(e ->
     button.getUI().ifPresent(ui ->
           ui.navigate("homepage"))
);

🔖Using the RouterLink Component

RouterLink is a component that uses the <a> tag to build links that point to route targets in your application.

Navigation using RouterLink retrieves the new component's content without refreshing the page. The page is changed in place rather than reloading the entire page, but the URL in the browser is updated.

Let’s understand RouterLink through an example:
 

void buildMenu() {
    menu.add(new RouterLink("Home", AppView.class));
}

@Route(value = "")
public class AppView extends Component {
}

 

An illustration of this would be the use of RouterLink for navigation targets that include route parameters and whose navigation target class implements HasUrlParameter.

void buildMenu() {
    menu.add(new RouterLink("Welcome",
            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("Welcome, %s!", parameter));
    }
}

 

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

void buildMenu() {
    menu.add(new RouterLink("Edit details of user",
            UserProfileEdit.class, new RouteParameters("userID", "1131")));
    menu.add(new RouterLink("Correct 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());
    }
}

🔖Using Standard Links

It is also possible to navigate using regular <a href="home"> type links. You can accomplish this by using an Anchor component and providing an url and text content:

new Anchor("/app", "Go to /app route");

 

Setting the anchor target property to _blank will cause a regular link to open in a new tab.

Anchor anchor = new Anchor("/app", "Go to /app route");
anchor.getElement().setAttribute("target", "_blank");

 

By default, clicking on a regular link does not result in a full page reload since the Vaadin router intercepts all occurrences of anchor navigation. If you want a full page to reload to occur, for instance when accessing a page that is not Vaadin-implemented, you may add the router-ignore property; for instance,

<a router-ignore href="home">Go to the home page</a>. This can be done from the Java API as follows:
 

Anchor anchor = new Anchor("/app", "Go to /app route");
anchor.getElement().setAttribute("router-ignore", "");

Route Parameters 🌐

The variable components of a URL segment are referred to as route parameters. These parameters offer a mechanism to transmit additional data to a certain route.

Users can access the appt route using the URL /app/<some-string>, for instance, if the application has a route with the name app that accepts a string parameter. For instance, visitors can call the welcome route using any of the following URLs:

• /app/home
• /app/about
• /app/feature
• and so on ..
   

In these examples, the home, about, and feature strings are route parameters that the app route can use to respond to requests.

🔖Defining Route Parameters

A view that takes route parameters supplied by the URL should:

• a HasUrlParameter<T> implementation
   
• Generics are used to define the parameter type
   

Based on values taken from the URL, HasUrlParameter specifies the setParameter() function that is invoked by the Router. Prior to the activation of a navigation target, this procedure is always called (before the BeforeEnter event).

As an illustration, consider creating a navigation target that uses a string argument to generate a welcome string, which it then uses as its own text content when navigating:

@Route(value = "app")
public class GreetingComponent extends Div
        implements HasUrlParameter<String> {


    @Override
    public void setParameter(BeforeEvent event, String parameter) {
        setText(String.format("welcome, %s!", parameter));
    }
}

A separate navigation target with the exact @Route is specified to match app/<some particular path>. The navigation target is automatically established upon startup for every app/<anything> path. It is also important to remember that while resolving the URL, an exact navigation goal is always prioritized above route parameters.

🔖Alternatives to Route Parameters

The simplest way to accept parameters is via route parameters, which is the method discussed in this article. It should work for the majority of typical use cases. So, if at all feasible, it is advised to employ this strategy.

However, Vaadin Flow provides two more approaches for receiving parameters if utilizing route parameters is not acceptable for your use case:

1. Query Arguments: This method works well when you need to accept a number of optional parameters or when you need to have explicit name-value pairs. (Refer to the Query Parameters manual.)
    
2. Route Templates: This method of receiving parameters is the most effective but also the most difficult. It is advised against utilizing this strategy due to its complexity unless your particular use case cannot be satisfied by route or query parameters. (See the guide to Route Templates.)

Frequently Asked Question❓

What does route mean?

The route generally means the path, which decides the way data is sent from source to destination.

What is the route parameter?

The variable components of a URL segment are referred to as route parameters. These parameters offer a mechanism to transmit additional data to a certain route.

How to define routes in Vaadin?

The @Route annotation may be used to specify any component as a route target for a specific URL fragment.

What is RouterLink Component?

RouterLink is a component that uses the <a> tag to build links that point to route targets in your application.

How to open a link in a new tab?

Setting the anchor target property to _blank will cause a regular link to open in a new tab.

Conclusion ✉️

In this article, we have extensively discussed how to define Routes and how to Navigating Between Routes along with Route parameters.If you would like to learn more, check out our articles on
 

• Keyboard Shortcuts
• Router Exception Handling
• Creating Components
   

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. 

Enroll in our courses and refer to the mock test and problems available.

Take a look at the interview experiences and interview bundle for placement preparations.

 

Do upvote our blog to help other ninjas grow. 

Happy Coding!