PyCafe - Solara - Solara Navigation Example

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import solara


# In the docs you can take a look at:
# Understanding Routing: https://solara.dev/documentation/advanced/understanding/routing
# The Link component: https://solara.dev/documentation/components/advanced/link
# Use route and the whole Routing section under API:
# https://solara.dev/documentation/api/routing/use_route


@solara.component
def Page():
    solara.Text("Hi! I'm the home route")


# The `Layout` component replaces an `Outlet`. All the children are passed to it so they can be wrapped
@solara.component
def Layout(children=[]):
    Navigation()
    # Note that we have to pass the children to some component in order for them to render
    solara.Column(children=children)


@solara.component
def Navigation():
    with solara.Row():
        with solara.Link("/"):
            solara.Button("Go home")
        with solara.Link("/routes/a"):
            solara.Button("Go to A")
        with solara.Link("/routes/b"):
            solara.Button("Go to B")


@solara.component
def PageA():
    solara.Text("Hi! I'm page A")


@solara.component
def PageB():
    solara.Text("Hi! I'm page B")


# Here we manage routes manually, but this can also be done automatically based on
# file structure, see https://solara.dev/documentation/advanced/understanding/routing
routes = [
    solara.Route(
        path="/",
        component=Page,
        layout=Layout, # We only have to add the Layout component once, since all children are wrapped in it
                       # If you're using file-based routing, Layout components are discovered automatically (based on name)
    ),
    solara.Route(
        path="routes",
        children=[
            solara.Route(path="a", component=PageA),
            solara.Route(path="b", component=PageB)
        ],
    ),
]
Py.Cafe

solara-navigation-example

Solara Navigation Example
