Basic question on URL Routing

[etjkai]

Making reference to the tutorial: https://dash.plot.ly/urls

With the following code for index.py, when the below is run, there is no pathname for dcc.Location, and the code always yields 404.

How is it intended to work?

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

from app import app
from apps import app1, app2


app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])


@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/apps/app1':
        return app1.layout
    elif pathname == '/apps/app2':
        return app2.layout
    else:
        return '404'

if __name__ == '__main__':
    app.run_server(debug=True)```

[Emil]

The code that you pasted seems to work as intended. If you go to

http://127.0.0.1:8050/apps/app1

you will get the layout of app1. If you just open the base url,

http://127.0.0.1:8050/

you will get 404. The “pathnam” is set by the url in your browser.

[etjkai]

That’s right, if I manually key in http://127.0.0.1:8050/apps/app1, it does work.

Is it possible to set the landing page as http://127.0.0.1:8050/apps/app1, instead of just http://127.0.0.1:8050/ ?

This is as I’m thinking that if I host the web application, the very first page would be http://127.0.0.1:8050/ right?

[Emil]

Yes, you just add routes to the if statement. The base url is no different,

    if pathname == '/':  # this is the base url
        return app1.layout  # here you put what you want do show for this url (in this case, the base url)
    if pathname == '/apps/app1':
        return app1.layout
    elif pathname == '/apps/app2':
        return app2.layout
    else:
        return '404'

[etjkai]

Thanks Emil, understood clearly!