MattHat Posts - Answer Overflow

MattHat

•Created by MattHat on 7/25/2024 in #support

How to use a common header with solid-router nested layouts

Hi, If i have a nested layout like bellow what is the best way for routes that share the layout to change the title shown in the shared layout?

function PageWrapper(props) {
  return (
    <div>
      <header><h1>Tittle</h1></header>
      {props.children}
      <A href="/">Back Home</A>
    </div>
  );
}

<Route path="/" component={PageWrapper}> 
    <Route path="/" component={Home} /> // title"You are home"
    <Route path="/order" component={Order} /> // title "Make an order"
    <Route path="/order/:orderId" component={Status} /> // title "Order 123"
</Route>

function PageWrapper(props) {
  return (
    <div>
      <header><h1>Tittle</h1></header>
      {props.children}
      <A href="/">Back Home</A>
    </div>
  );
}

<Route path="/" component={PageWrapper}> 
    <Route path="/" component={Home} /> // title"You are home"
    <Route path="/order" component={Order} /> // title "Make an order"
    <Route path="/order/:orderId" component={Status} /> // title "Order 123"
</Route>

1 replies

SSolidJS

•Created by MattHat on 7/25/2024 in #support

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. 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>
                );
            }}
        />
    );
};

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>
);

8 replies

Gaming

Programming