Location and Link Components

These components are part of Dash Core Components, and their names make quite clear what they are and what they might do.

Getting to know the Location component

The Location component refers to the browser’s location bar. It’s also referred to as the address bar or the URL bar. We typically place a Location component in the app, and it doesn’t produce anything visible. We mainly use it to discover where we are in the app, and based on that, we induce some functionality.

Let’s create a simple example to see how it can be used in its simplest form.

1. Create a simple app.

   import dash_html_components as HTML
   import dash_core_components as dcc
   from jupyter_dash import JupyterDash
   from dash.dependencies import Output, Input
   app = JupyterDash(__name__)
   

2. Create a simple layout for the app containing a Location component and, right underneath it, an empty div.

   app.layout = html.Div([
       dcc.Location(id='location'),
   html.Div(id='output')
   ])
   

3. Create a callback function that takes the href attribute of the Location component and prints it to the empty div.

   @app.callback(Output('output', 'children'),