It doesn't seem as though layouts are working properly. At / (index.tsx) I'd like to override my default layout, MainLayout, with another, HomeLayout. Every page renders with HomeLayout (the one-page substitute).
I've scoured the docs. Is this a bug, or am I missing something about the way app.layout() selects routes?
Project Structure
fresh-project/
├─ routes/
│ ├─ _app.tsx
│ ├─ _middleware.tsx
│ ├─ _error.tsx
│ ├─ faq.tsx
│ ├─ index.tsx
├─ layouts/
│ ├─ home.tsx
│ ├─ main.tsx
├─ main.ts
Code
main.ts:
import { App, staticFiles, trailingSlashes } from "fresh";
import { ServerState } from "./utils.ts";
import HomeLayout from "./layouts/home.tsx";
import MainLayout from "./layouts/main.tsx";
export const app = new App<ServerState>()
.use(staticFiles())
.use(trailingSlashes("never"))
.layout('*', MainLayout)
.layout('/', HomeLayout, { skipInheritedLayouts: true })
.fsRoutes()routes/_app.tsx:
import { define } from "../utils.ts";
import { PageProps } from "fresh";
import Header from "../components/Header.tsx";
import Footer from "../components/Footer.tsx";
export default define.page(function App(props:PageProps) {
const Component = props.Component;
return (
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<title>wescam</title>
</head>
<body class="h-screen font-sans flex flex-col">
<Header user={props.state.user}/>
<Component />
<Footer />
</body>
</html>
);
});layouts/home.tsx:
import Menu from "../islands/Menu.tsx";
import Error from "../islands/Error.tsx";
export default function ({ Component }) {
return (
<main class="mx-0 px-2 py-1 lg:px-16 max-w-screen lg:max-w-screen-lg w-full grow overflow-hidden relative">
<Menu />
<Error />
<Component />
</main>
);
};layouts/main.tsx:
import Menu from "../islands/Menu.tsx";
import Error from "../islands/Error.tsx";
export default function ({ Component }) {
return (
<main class="mx-0 px-2 py-1 lg:px-16 max-w-screen lg:max-w-screen-lg w-full grow overflow-y-scroll relative">
<Menu />
<Error />
<Component />
</main>
);
};
It doesn't seem as though layouts are working properly. At
/(index.tsx) I'd like to override my default layout,MainLayout, with another,HomeLayout. Every page renders withHomeLayout(the one-page substitute).I've scoured the docs. Is this a bug, or am I missing something about the way
app.layout()selects routes?Project Structure
Code
main.ts:
routes/_app.tsx:
layouts/home.tsx:
layouts/main.tsx: