Here’s a brief overview of navigation and app routing solutions for various web development frameworks and technologies – with focus on Java and Flutter on which I have most experience.
Java Vaadin
Vaadin provides built-in navigation components and features for building web applications in Java. The Navigation Targets are implemented with the @Route(value=””) annotation. You could execute the actual transition with
UI.getCurrent().navigate("main", ....);
It offers multiple overloaded methods with different parameters – so you could pass in HTTP Request Parameters.
Java Spring
Spring MVC framework, commonly used in Java web development, supports navigation through controllers and views. You can define mappings between URLs and controller methods using annotations like @RequestMapping
or @GetMapping
. You could render HTML with Thymeleaf or JSP templates. The actual transition you need to handle it on your own with HTML.
Web (HTML/CSS/JavaScript)
For basic navigation between pages in a web application, you can use hyperlinks (<a>
tags) with the href
attribute pointing to the URL of the destination page or location global variable from JavaScript. Client Side Frameworks change the UI without full page reload so there is JavaScript History API that change the URL, so, if the user refreshes the page – the content to remain the same. Single Page Application (SPA) frameworks like React, Angular, and Vue.js use client-side routing libraries such as React Router, Angular Router, or Vue Router for more dynamic navigation.
React
React Router is a popular library for navigation in React applications. It provides components like BrowserRouter
, Route
, Link
, and Switch
to manage navigation and rendering of components based on the URL. With React Router, you can implement client-side routing in SPAs.
Angular
Angular Router is the official routing library for Angular applications. It offers features like route configuration, nested routes, route guards, and lazy loading of modules. You define routes in the RouterModule.forRoot()
method and use directives like routerLink
for navigation in templates. Here is the tutorial: https://angular.io/guide/router.
Flutter
If you don’t use third party library – with Flutter you will use the build-in navigation stack – to manage the navigation between screens (or routes). You can push new routes onto the stack to navigate forward and pop routes off the stack to navigate back. Flutter provides widgets like Navigator
, MaterialPageRoute
, and CupertinoPageRoute
for navigating between screens.
You could implement animation with Page Route Builder https://docs.flutter.dev/cookbook/animation/page-route-animation.
There are some more advanced components with their own navigation and need of special attention.
Bottom Navigation Bar
Flutter’s BottomNavigationBar
widget is located on the bottom and allows you to create a bottom navigation bar with multiple tabs, each representing a different screen or route. Users can switch between different sections of your app.
Tab Bar Navigation
Similar to the Bottom Navigation Bar – Flutter’s TabBar
and TabBarView
widgets can be used to implement tab-based navigation, where each tab represents a different screen or view. It is usually located on the top. Users can swipe between tabs or tap on them to switch views.
Drawer Navigation
Flutter’s Drawer
widget provides a slide-in side nnavigation panel that can be used to navigate to different sections or screens of your app. You can customize the drawer’s content and behavior to suit your app’s design.
Third-Party Navigation Packages
There are several third-party navigation packages available on pub.dev, Flutter’s package repository, that offer additional navigation features and functionalities. Some popular ones include fluro
, get
, auto_route
, and router
.
Go Router
The latest and probably the most popular one is go_router. Go_router is highly customizable and extensible, allowing you to customize route transitions, route matching behavior, or other aspects of the routing process. You can also extend Go_router with custom route types or middleware to suit your app’s specific requirements.
Here’s an overview of its features and how it can be used:
Declarative Routing
Go_router allows you to define routes in a declarative manner using a GoRouter
widget. You can specify route definitions using a builder pattern, making it easy to define and configure routes in your app.
Dynamic Route Generation
Routes in Go_router can be generated dynamically based on runtime conditions or data. This is useful for scenarios where the set of routes may change based on user authentication, data fetching, or other factors.
Route Parameters and Query Parameters
Go_router supports route parameters and query parameters, allowing you to pass data between routes or extract data from the URL. This is useful for passing parameters such as IDs, search queries, or other data between screens.
Route Guards and Middleware
You can define route guards and middleware functions in Go_router to intercept and handle navigation events. This allows you to implement authentication, authorization, or other pre-navigation checks before allowing a route transition to occur.
Nested Routing
Go_router supports nested routing, allowing you to nest routers within each other to create hierarchical navigation structures. This is useful for organizing complex app layouts or implementing nested navigation patterns such as tab bars or drawers.
Navigation Events and Hooks
Go_router provides hooks for handling navigation events such as route changes, route transitions, or route matches. You can use these hooks to perform custom logic or side effects in response to navigation events.
Integration with State Management
Go_router can be easily integrated with popular state management solutions like Provider, Bloc, or Riverpod. This allows you to synchronize navigation state with app state and manage navigation-related data using your preferred state management approach.
Deep Linking and URL Routing
Go Router works well with deep linking. Going to some sub-page is not only a feature of the Web. Apps that you install on your Android or iOS may register domains that they will process in-app. So – when the user clicks on some URL on the Internet, you may program your app to go in some inner screen with the parameters from the URL.
That’s it.
Please check out my Vaadin Application that Generates Routing Code: https://programtom.com/dev/product/app-routing-code-snippets-generator-beta/.