Creating a <ProtectedRoute/> component to use with solid router

Hi,

Currently i have this which results in a

Uncaught Error: <A> and 'use' router primitives can be only used inside a Route.

Uncaught Error: <A> and 'use' router primitives can be only used inside a Route.

Uncaught Error: <A> and 'use' router primitives can be only used inside a Route.

Uncaught Error: <A> and 'use' router primitives can be only used inside a Route.

ProtectedRoute.tsx:

...
import { useAuth } from "@/components/AuthContext";

export const ProtectedRoute: Component<ProtectedRouteProps> = (props) => {
    const { component: ProtectedComponent, path } = props;
    const auth = useAuth();
    const location = useLocation();

    return (
        <Route
            path={path}
            component={(routeProps: RouteProps<string>) => {
                return (
                    <Switch fallback={<Navigate href="/login" state={{ from: location.pathname }} />}>
                        <Match when={auth.isLoading()}>
                            <div>Loading...</div>
                        </Match>
                        <Match when={auth.isAuthenticated()}>
                            <ProtectedComponent {...routeProps} />
                        </Match>
                    </Switch>
                );
            }}
        />
    );
};

...
import { useAuth } from "@/components/AuthContext";

export const ProtectedRoute: Component<ProtectedRouteProps> = (props) => {
    const { component: ProtectedComponent, path } = props;
    const auth = useAuth();
    const location = useLocation();

    return (
        <Route
            path={path}
            component={(routeProps: RouteProps<string>) => {
                return (
                    <Switch fallback={<Navigate href="/login" state={{ from: location.pathname }} />}>
                        <Match when={auth.isLoading()}>
                            <div>Loading...</div>
                        </Match>
                        <Match when={auth.isAuthenticated()}>
                            <ProtectedComponent {...routeProps} />
                        </Match>
                    </Switch>
                );
            }}
        />
    );
};

...
import { useAuth } from "@/components/AuthContext";

export const ProtectedRoute: Component<ProtectedRouteProps> = (props) => {
    const { component: ProtectedComponent, path } = props;
    const auth = useAuth();
    const location = useLocation();

    return (
        <Route
            path={path}
            component={(routeProps: RouteProps<string>) => {
                return (
                    <Switch fallback={<Navigate href="/login" state={{ from: location.pathname }} />}>
                        <Match when={auth.isLoading()}>
                            <div>Loading...</div>
                        </Match>
                        <Match when={auth.isAuthenticated()}>
                            <ProtectedComponent {...routeProps} />
                        </Match>
                    </Switch>
                );
            }}
        />
    );
};

...
import { useAuth } from "@/components/AuthContext";

export const ProtectedRoute: Component<ProtectedRouteProps> = (props) => {
    const { component: ProtectedComponent, path } = props;
    const auth = useAuth();
    const location = useLocation();

    return (
        <Route
            path={path}
            component={(routeProps: RouteProps<string>) => {
                return (
                    <Switch fallback={<Navigate href="/login" state={{ from: location.pathname }} />}>
                        <Match when={auth.isLoading()}>
                            <div>Loading...</div>
                        </Match>
                        <Match when={auth.isAuthenticated()}>
                            <ProtectedComponent {...routeProps} />
                        </Match>
                    </Switch>
                );
            }}
        />
    );
};

Index.tsx:

const queryClient = new QueryClient();

const App = () => (
    <Router>
        <Suspense fallback={<div>Loading...</div>}>
                <QueryClientProvider client={queryClient}>
                    <AuthProvider>
                        <Route path="/login/:orgUsername?" component={Login} />
                        <Route path="*" component={NotFound} />
                        <Layout>
                            <ProtectedRoute path="/" component={Home} />
                            <ProtectedRoute path="/order" component={Order} />
                            <ProtectedRoute path="/order/:id" component={Status} />
                        </Layout>
                        <ToastRegion>
                            <ToastList />
                        </ToastRegion>
                    </AuthProvider>
                </QueryClientProvider>
      </Suspense>
    </Router>
);

const queryClient = new QueryClient();

const App = () => (
    <Router>
        <Suspense fallback={<div>Loading...</div>}>
                <QueryClientProvider client={queryClient}>
                    <AuthProvider>
                        <Route path="/login/:orgUsername?" component={Login} />
                        <Route path="*" component={NotFound} />
                        <Layout>
                            <ProtectedRoute path="/" component={Home} />
                            <ProtectedRoute path="/order" component={Order} />
                            <ProtectedRoute path="/order/:id" component={Status} />
                        </Layout>
                        <ToastRegion>
                            <ToastList />
                        </ToastRegion>
                    </AuthProvider>
                </QueryClientProvider>
      </Suspense>
    </Router>
);

const queryClient = new QueryClient();

const App = () => (
    <Router>
        <Suspense fallback={<div>Loading...</div>}>
                <QueryClientProvider client={queryClient}>
                    <AuthProvider>
                        <Route path="/login/:orgUsername?" component={Login} />
                        <Route path="*" component={NotFound} />
                        <Layout>
                            <ProtectedRoute path="/" component={Home} />
                            <ProtectedRoute path="/order" component={Order} />
                            <ProtectedRoute path="/order/:id" component={Status} />
                        </Layout>
                        <ToastRegion>
                            <ToastList />
                        </ToastRegion>
                    </AuthProvider>
                </QueryClientProvider>
      </Suspense>
    </Router>
);

const queryClient = new QueryClient();

const App = () => (
    <Router>
        <Suspense fallback={<div>Loading...</div>}>
                <QueryClientProvider client={queryClient}>
                    <AuthProvider>
                        <Route path="/login/:orgUsername?" component={Login} />
                        <Route path="*" component={NotFound} />
                        <Layout>
                            <ProtectedRoute path="/" component={Home} />
                            <ProtectedRoute path="/order" component={Order} />
                            <ProtectedRoute path="/order/:id" component={Status} />
                        </Layout>
                        <ToastRegion>
                            <ToastList />
                        </ToastRegion>
                    </AuthProvider>
                </QueryClientProvider>
      </Suspense>
    </Router>
);

Creating a <ProtectedRoute/> component to use with solid router

Similar Threads

Similar Threads

Similar Threads