[REF-3448] 404 not rendering

[charlestondance]

Describe the bug
entering a random url give a 404 with text in the page
going to localhost:3000/404 updates the title but nothing is rendered in the page. Making a custom 404 has the same issue where no components are rendered in the page

To Reproduce
Steps to reproduce the behavior:

• enter URL as above

Expected behavior
correct 404 page be returned at localhost:3000/404

Screenshots
If applicable, add screenshots to help explain your problem.

Specifics (please complete the following information):

• Python Version:
• Reflex Version:
• OS:
• Browser (Optional):

Additional context
Add any other context about the problem here.

_REF-3448

[masenf]

I'm able to reproduce the issue, even with our main website https://reflex.dev/404/ renders as a blank page.

Not sure what the problem is.

Is there a use case? Or are you just wondering for consistency sake why /404 doesn't render? (I'm also curious)

[Lendemor]

If only for consistency we should figure out what happens and fix it I think.

[charlestondance]

No probs. My two use cases are:

1. Custom 404. You cant make a custom 404 now as no components will be rendered
2. I am using chakra.box as an iframe so i don't see the title change. All i can see in the iframe is blank space and i have no idea what is going on.

[masenf]

Custom 404

does it not work when you use app.add_custom_404_page? reflex.dev uses custom 404 and it seems to work fine (although accessing it directly via /404 does not work)

[charlestondance]

Custom or built in 404s do not render at /404. I am trying to handle and return /404 under certain cases that i check for. Automatically returning 404 on random routes doesnt help my use case.

[charlestondance]

Problems with dynamic routes return the broken /404 automatically as well.

[Manas1820]

import reflex as rx

from rxconfig import config


class State(rx.State):
    """The app state."""

    @rx.var
    def test_id(self) -> str:
        return self.router.page.params.get("id", "No Test ID")


@rx.page(route="/test/[id]")
def test():
    """A page that updates based on the route."""
    return rx.container(
        rx.heading(f"Testing ID: {State.test_id}", size="9"),
        spacing="5",
        align="center",
        justify="center",
        min_height="85vh",
    )


app = rx.App()
app.add_custom_404_page(
    rx.container(
        rx.color_mode.button(position="top-right"),
        rx.vstack(
            rx.heading("Oops! Page Not Found", size="9"),
            rx.text(
                "It looks like the page you're looking for doesn't exist. You can start exploring by editing ",
                rx.code(f"{config.app_name}/{config.app_name}.py"),
                size="5",
            ),
            rx.link(
                rx.button("Visit our Documentation"),
                href="https://reflex.dev/docs/getting-started/introduction/",
                is_external=True,
            ),
            spacing="5",
            justify="center",
            min_height="85vh",
        ),
        rx.logo(),
    )
)

I have verified my code using an example, as shown in the screenshots after the updated code mentioned in my PR.

@charlestondance Can you confirm once if this is the expected outcome !

[picklelo]

This should be resolved in the latest code (please re-open if needed!)