Navigation

To provide navigation, the Routing dependency needs to be given instructions on which Form should be opened based on which URL has been navigated to. This is done by definining routes which are then used by the router to interpret given URLs.

Routes

Routes are subclasses of the Routing dependency’s Route class. They link URL addresses and Anvil Forms, allowing the router module to serve the appropriate Form based on a given URL. They are mostly centered around two attributes:

• path – The URL path for the Route (excluding your app’s base URL). When navigating to a new path, the router module attempts to find a Route whose path matches the path in the browser’s URL.
• form – The name of the Form this Route opens when matched.

  from routing.router import Route
  
  class MyRoute(Route):
    path = "/"
    form = "MyForm"

There are other attributes that you can define, all of which can be found in the full route documentation.

Routes module

Routes should be defined in a dedicated Module. This Module then needs to be imported by both the Module responsible for launching the router and by server code, for them to be aware of our Route definitions. This process is demonstrated here.

One thing to note is that the router will try to match routes in the order they are defined; when receiving a path, the router goes through the route definitions in order, meaning that if two routes match the same path, the one that was defined earlier will be matched.

from routing.router import Route

class NewerRoute(Route):
    path="/my-route"
    form = "NewerForm"

class DeprecatedRoute(Route):
    path = "/my-route"
    form = "DeprecatedForm"

In the above example, NewerRoute is defined before DeprecatedRoute. Navigation to the "/my-route" path will thus match with NewerRoute instead of DeprecatedRoute and open an instance of NewerForm rather than DeprecatedForm.

This is particularly important to keep in mind when defining routes with parameters.

from routing.router import Route

class AuthorsRoute(Route):
    path = "/authors"
    form = "Pages.Authors"

class NewAuthorRoute(Route):
    path = "/authors/new"
    form = "Pages.NewAuthor"

class AuthorRoute(Route):
    path = "/authors/:id"
    form = "Pages.Author"

With the above Route definitions, if we were to navigate to “authors/new”, the router’s first match would be NewAuthorRoute, which is what we intended.

Let’s look at what would happen if we were to swap the order of the NewAuthorRoute and AuthorRoute definitions.

from routing.router import Route

class AuthorsRoute(Route):
    path = "/authors"
    form = "Pages.Authors"

class AuthorRoute(Route):
    path = "/authors/:id"
    form = "Pages.Author"

class NewAuthorRoute(Route):
    path = "/authors/new"
    form = "Pages.NewAuthor"

With this order, if we were to navigate to “authors/new”, the router’s first match would not be NewAuthorRoute, but AuthorRoute; because AuthorRoute is defined first, the “new” part of our path is seen as a value for the id parameter. This means that we never end up reaching our NewAuthorRoute.

NavLinks

The Routing dependency comes with its own NavLink component to enable navigation through your various routes.

NavLinks must be given a path attribute. When a NavLink is clicked, the Routing library sets the browser URL to the NavLink’s path. The router module will then attempt to find a route to match this path. If a match is found, the router module will open the Form associated with this route.

The navigate method

Alternatively, the navigate method can be used to access a route through code. It functions the same way NavLinks do, allowing you to supply a path and other parameters as keyword arguments.

import anvil.users
from routing.router import navigate

class MyForm(MyFormTemplate)
  def __init__(self, **properties):
    self.init_components(**properties)

  def on_user_log_out(self, **event_args):
    # This form has a log out button, to which we have added this method as a handler of its Click event.
    # When the log out button is clicked, we log the user out and navigate them to the login page.
    anvil.users.logout()
    navigate(path="/login-page")

You can find more details on the navigate method in its documentation page.

Do you still have questions?

Our Community Forum is full of helpful information and Anvil experts.