Skip to content

Hooks

Several pre-fabricated hooks are provided to help integrate with routing features. You can learn more about them below.

Note

If you're not familiar what a hook is, you should read the ReactPy docs.

Use Search Parameters

The use_search_params hook can be used to access query parameters from the current location. It returns a dictionary of query parameters, where each value is a list of strings.

 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
from reactpy import component, html, run

from reactpy_router import browser_router, link, route, use_search_params


@component
def search():
    search_params = use_search_params()
    return html(html.h1(f"Search Results for {search_params['query'][0]} 🔍"), html.p("Nothing (yet)."))


@component
def root():
    return browser_router(
        route(
            "/",
            html.div(
                html.h1("Home Page 🏠"),
                link({"to": "/search?query=reactpy"}, "Search"),
            ),
        ),
        route("/search", search()),
    )


run(root)

Use Parameters

The use_params hook can be used to access route parameters from the current location. It returns a dictionary of route parameters, where each value is mapped to a value that matches the type specified in the route path.

 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
from reactpy import component, html, run

from reactpy_router import browser_router, link, route, use_params


@component
def user():
    params = use_params()
    return html(html.h1(f"User {params['id']} 👤"), html.p("Nothing (yet)."))


@component
def root():
    return browser_router(
        route(
            "/",
            html.div(
                html.h1("Home Page 🏠"),
                link({"to": "/user/123"}, "User 123"),
            ),
        ),
        route("/user/{id:int}", user()),
    )


run(root)
Authors: Mark Bakhit