MattHat
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
Creating a <ProtectedRoute/> component to use with solid router
Hi,
Currently i have this which results in a
Index.tsx:
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>
);
}}
/>
);
};
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