S
SolidJS•3y ago
Mr Void

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

Did you find this page helpful?