Callback error updating page-content.children

Dash Python
1

I am getting the error while initializing the login page which is first page of the app as well. It runs fine though while checking login email. I am unable to comprehend the error and its resolution.

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

app = dash.Dash(__name__)
app.config.suppress_callback_exceptions = True
app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    
    html.Div(id='page-content',children = [
        html.H2('Login Page'),
        html.Div('Email'),
        dcc.Input(id='email', type='text', placeholder='Enter email'),
        html.Br(),
        html.Br(),
        html.Button('Login', id='login-button', n_clicks=0),
        html.Div(id='login-error')
    ], className='login-box')
])

success_page_layout = html.Div([
    html.H2('Success!'),
    html.P('You have successfully logged in.')
])

failure_page_layout = html.Div([
    html.H2('Failure!'),
    html.P('You have not been successfully logged in.')
])

@app.callback(Output('url', 'pathname'),
              [Input('login-button', 'n_clicks')],
              [State('email', 'value')])
def login(n_clicks, email):
    if n_clicks > 0:

        if email == 'example@example.com':
            return '/success'
        else:
            return '/failure'
    return '/'

@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/success':
        return success_page_layout
    elif pathname == '/failure':
        return failure_page_layout
    else:
        return app.layout['children']


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

HI @S09q welcome to the forums.

While this is not an answer to your question, it might be worth taking a look at this if your intention is to build a multi page app.

3

I think I have found the issue. Instead of using “children” I need to use id in app.layout while returning in callback

return app.layout['page-content']