SolidJS•4mo ago

solid-router | return Navigate as component

Is there any way to return <Navigate href="/auth/login" /> as a component rather than an element? On version solid-router@0.8 I was able to return an element for a route, however the new version 0.12 requires a component instead.

const ProtectedRoutes = () => {
    const store: StoreState = useStore()

    const allowAuthenticated = (accept: Component): Component => {
        if (store.user.isAuthenticated) {
            return accept
        }

        return <Navigate href="/auth/login" /> // Need to return this as a component
    }

    const denyAuthenticated = (accept: Component): Component => {
        if (!store.user.isAuthenticated) {
            return accept
        }

        return <Navigate href="/" /> // Need to return this as a component
    }

    return (
        <Router root={App}>
            <Route path="/" component={allowAuthenticated(AppContainer)}>
            ...
        </Router>    
    )
    ...
}

const ProtectedRoutes = () => {
    const store: StoreState = useStore()

    const allowAuthenticated = (accept: Component): Component => {
        if (store.user.isAuthenticated) {
            return accept
        }

        return <Navigate href="/auth/login" /> // Need to return this as a component
    }

    const denyAuthenticated = (accept: Component): Component => {
        if (!store.user.isAuthenticated) {
            return accept
        }

        return <Navigate href="/" /> // Need to return this as a component
    }

    return (
        <Router root={App}>
            <Route path="/" component={allowAuthenticated(AppContainer)}>
            ...
        </Router>    
    )
    ...
}

1 Reply

Brendonovich•4mo ago

components are just functions returning jsx - either put the navigates in arrow functions or make component into an arrow function

Gaming

Programming

solid-router | return Navigate as component