Uncodie
Technical DocumentationNo CodeTutorialsChangelogDisccord
Developers
Developers
  • ๐Ÿ“–Documentation
    • Basic Concepts
      • Node JS
      • React
      • Postgres SQL
      • GraphQL
      • Git
      • API
  • ๐Ÿ”ŒAPI
    • Getting Started
      • Credentials
    • Users
      • Register User
    • Component Interface
      • Props
  • ๐Ÿค–IDE
    • Getting started
    • Component View
      • CSS
      • Controller
      • Component
    • Compiler
    • Importing Code
      • Scripts
        • Manifest
      • Connectors
        • Manifest
      • Components
        • Manifest
    • Exporting Code
      • Design Systems
        • Custom React libraries
      • Guidelines
  • โš™๏ธFigma Plugin
    • Variables
      • Global Variables
      • Local Variables
      • Route Variables
      • Session Context
      • Window Variables
    • Actions
      • GraphQL Trigger
      • Refresh Query
      • Set Variable
      • Select and Navigate
  • ๐ŸŽ›๏ธSettings
    • User Authentication
    • Git
    • External Deployment
    • Version Control
    • External DB Setup
    • SEO
Powered by GitBook
On this page
  • Overview
  • Quickstart
  • Setup
  • Use Cases
  • Rendering a specific entry in your Data Base
  • Build Dynamic Queries
  • Select And Navigate
  • Limitations
  • Parameters Amount

Was this helpful?

  1. Figma Plugin
  2. Variables

Route Variables

URL and path related variables stored in RouterContext

PreviousLocal VariablesNextSession Context

Last updated 1 year ago

Was this helpful?

Overview

In web applications, there is a very common practice to send parameters as URL variables and keywords to render or get different app behaviors or tracking for your applications.

This is an easy way to handle different use cases without adding extra complexity to your app or DB structure.

Quickstart

To use Route Variables you have to declare a Screen or Wrapper Route component in your app and declare some dynamic route variables in the URL of your component example:

URL

/MyScreenPath/:dynamic_property

For more information using screens see:

Setup

  1. Add a Screen Component to your application

  2. Add a dynamic property in the URL parameter using the next syntax:

":" + "name of your variable as it will be found in the RouteContext"
  1. Your new variable will be available for your component children to use and pass to other scripts or actions

Use Cases

Rendering a specific entry in your Data Base

Select and share the ID of a database entry in your app and pass it as a dynamic parameter for your route to build dynamic queries in your app.

Build Dynamic Queries

Pass a contextual parameter to your GraphQL queries to render your objects contextually

Select And Navigate

Select the ID of an object and pass it as a parameter to the next screen to render contextual data or details of the selected object.

Limitations

Parameters Amount

For the moment you can use only 1 dynamic parameter by route, so if you have the route

/project/:ID_Project

You canยดt nest more dynamic parameters for the moment, for example:

/project/:ID_Project/:status/:settings

Solution

Use a new path for your new dynamic parameter or use local or global variables instead.

โš™๏ธ
Screens
Logo