Skip to content

URL Router

Overview

A Single Page Application URL router, which is a variant of reactpy-router that uses Django conventions.

Note

Looking for more details on URL routing?

This package only contains Django specific URL routing features. Standard features can be found within reactive-python/reactpy-router.

Django Router

URL router that enables the ability to conditionally render other components based on the client's current URL path.

Pitfall

All pages where django_router is used must have identical, or more permissive URL exposure within Django's URL patterns. You can think of the router component as a secondary, client-side router. Django will always handle the initial load of the webpage.

You can duplicate all your URL patterns within both Django and ReactPy, but it's easiest to use a wildcard .* within Django's urlpatterns and let ReactPy handle the rest. For example...

urlpatterns = [
    re_path(r"^.*$", my_reactpy_router_view),
]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
from reactpy import component, html
from reactpy_django.router import django_router
from reactpy_router import route


@component
def my_component():
    return django_router(
        route("/router/", html.div("Example 1")),
        route("/router/any/<value>/", html.div("Example 2")),
        route("/router/integer/<int:value>/", html.div("Example 3")),
        route("/router/path/<path:value>/", html.div("Example 4")),
        route("/router/slug/<slug:value>/", html.div("Example 5")),
        route("/router/string/<str:value>/", html.div("Example 6")),
        route("/router/uuid/<uuid:value>/", html.div("Example 7")),
        route("/router/two_values/<int:value>/<str:value2>/", html.div("Example 8")),
        route("/router/*", html.div("Fallback")),
    )
See Interface

Parameters

Name Type Description Default
*routes Route An object from reactpy-router containing a path, element, and child *routes. N/A

Returns

Type Description
VdomDict | None The matched component/path after it has been fully rendered.
How is this different from reactpy_router.simple.router?

This component utilizes reactpy-router under the hood, but provides a more Django-like URL routing syntax.

Last update: October 22, 2024
Authors: Mark Bakhit