SolidJS•8mo ago

Custom ProtectedRoutes component does not render elements on URL match

I've created a custom component ProtectedRoutes which is rendered within App.tsx. The purpose is to check the URL that the user is viewing, allow or deny based on store.user.isAuthenticated variable. There are also two sub-components for ProtectedRoutes. One is AllowAuthenticated:

import { JSX, createEffect } from "solid-js";
import { StoreState, useStore } from "../../store";
import { Navigate } from "@solidjs/router";

type ProtectedRouteProps = {
    accept: JSX.Element
}

const AllowAuthenticated = (props: ProtectedRouteProps) => {
    // ...

    const store: StoreState = useStore()
    return (
        store.user.isAuthenticated === true ?
            props.accept
        :
            <Navigate href={'/login'} />
    )
}

export default AllowAuthenticated;

import { JSX, createEffect } from "solid-js";
import { StoreState, useStore } from "../../store";
import { Navigate } from "@solidjs/router";

type ProtectedRouteProps = {
    accept: JSX.Element
}

const AllowAuthenticated = (props: ProtectedRouteProps) => {
    // ...

    const store: StoreState = useStore()
    return (
        store.user.isAuthenticated === true ?
            props.accept
        :
            <Navigate href={'/login'} />
    )
}

export default AllowAuthenticated;

And similarly, the other is DenyAuthenticated which redirects the user to a default URL for authenticated users. Here's what the ProtectedRoutes component looks like:

const ProtectedRoutes = () => {

    createEffect(() => {
        console.log('> ProtectedRoutes')
    })

    const Routes = useRoutes([
        {
            path: "/",
            element: <AllowAuthenticated accept={<MainContainer />} />,
            children: [ 
                { path: ["/", "dashboard"], component: Dashboard },
                { path: "profile", component: Profile }
            ]
        },
        { path: "/login",    element: <DenyAuthenticated accept={<Login />} /> },
        { path: "/register", element: <DenyAuthenticated accept={<Register />} /> }
    ])

    return <Routes />
}

const ProtectedRoutes = () => {

    createEffect(() => {
        console.log('> ProtectedRoutes')
    })

    const Routes = useRoutes([
        {
            path: "/",
            element: <AllowAuthenticated accept={<MainContainer />} />,
            children: [ 
                { path: ["/", "dashboard"], component: Dashboard },
                { path: "profile", component: Profile }
            ]
        },
        { path: "/login",    element: <DenyAuthenticated accept={<Login />} /> },
        { path: "/register", element: <DenyAuthenticated accept={<Register />} /> }
    ])

    return <Routes />
}

For some reason, when URL is / or any of the children paths /dashboard, /profile - their contents are not rendered on the page. However, not using Allow/DenyAuthenticated elements, then the pages are rendered as expected. What might be the issue here?
here is a minimal version: https://stackblitz.com/edit/solidjs-templates-gkkfyr?file=src%2FApp.tsx

Nedkan

StackBlitz

Solidjs - Templates (forked) - StackBlitz

Vite + solid templates

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Custom ProtectedRoutes component does not render elements on URL match