Handling Dynamic Content with Framework7 Parameterized Routing

The Deep-Linking Dilemma

Building a mobile-first SPA often leads to a common friction point: how to handle dynamic content—like a specific user profile or a product detail page—without creating a separate route for every single item in your database. If you rely on global state to pass data between pages, you lose the ability to share links or allow users to refresh the page without losing their place.

The solution is parameterized routing. By defining dynamic segments in your URL, you can treat the URL as the single source of truth for what the page should display, while leveraging Framework7's built-in transitions to keep the app feeling like a native iOS or Android application.

Defining Dynamic Route Patterns

In Framework7, the router uses a configuration array to map paths to components or HTML templates. To create a dynamic route, you use a colon prefix (:) to denote a variable segment. This tells the router that any value appearing in that position of the URL should be captured as a parameter.

When a user navigates to a path like /product/123, the router matches it against a pattern like /product/:id. It then extracts 123 and makes it available within the page's lifecycle methods, allowing you to fetch the correct data from an API based on that specific ID.

Implementing a Parameterized View

To implement this, you need to configure the route in your App initialization and then access those parameters within the page component. Below is a configuration example for a product detail flow.

// App.js or router configuration
const routes = [
  {
    path: '/product/:id',
    component: ProductDetail,
  },
];

// ProductDetail.js (Component)
export default (props) => {
  // The route parameters are available in props.route.params
  const productId = props.route.params.id;

  return `
    
      
        Product ID: ${productId}
        
Fetching details for item ${productId}...
      
    
  `;
};

Executing the Navigation

To trigger this transition from another page, use the router.navigate() method. This should be run within the context of the Framework7 app instance.

// Navigate to a specific product
app.views.main.router.navigate(`/product/${item.id}`);

Expected Result: The router will push the new URL to the history stack and trigger a platform-specific transition (a slide-in from the right on iOS or a fade-up on Android) while passing the id to the ProductDetail component.

Platform-Aware Transitions

One of the primary advantages of using the Framework7 Router over a generic JS router is the automatic handling of Page Transitions. The router detects the theme (iOS vs. Material Design) and applies the corresponding animation:

• iOS: Uses a horizontal slide with a parallax effect on the navigation bar.
• Material Design (MD): Uses a vertical slide or a subtle fade, depending on the navigation depth.

These transitions are handled by manipulating the DOM and the history stack, ensuring that the "Back" button behavior mimics the native OS experience without requiring a full page reload.

Critical Limitations and Trade-offs

While parameterized routing is powerful, it introduces two specific engineering risks:

The Server-Side 404 Problem

Because Framework7 handles routing on the client side, a hard refresh on /product/123 will cause the browser to request that exact path from your web server. Unless your server is configured with a catch-all route (redirecting all requests to index.html), the user will see a 404 error. Ensure your Nginx or Apache config redirects all non-file requests to the root index.

DOM Bloat and Stuttering

Framework7 keeps pages in the DOM to maintain the history stack for fast "back" transitions. If your dynamic pages are heavy with images or complex components, navigating through many parameterized routes can increase memory usage. To mitigate this, use lazy-loading for components or manually clear the history stack when navigating to a top-level dashboard.

Verification Checklist

To verify your implementation is working correctly, perform these three checks:

1. Parameter Check: Navigate to a dynamic route and console.log(props.route.params) to ensure the ID is being captured correctly.
2. Refresh Test: Perform a hard browser refresh on a parameterized URL to verify your server-side fallback is active.
3. Theme Toggle: Switch the app theme from ios to md and verify that the transition animation changes automatically.