What's the correct way to implement routing with Partial? #3052
-
|
Hi. I'm new to deno fresh. I believe #2559 is likely related to this issue, but no one has mentioned any practical use cases for Partial in that discussion. Project structure
export default function App({ Component }: PageProps) {
return (
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>fresh-partial-route</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body f-client-nav>
<Partial name="main">
<Component />
</Partial>
</body>
</html>
);
}
export default function Home() {
return (
<ul>
<li>
<a href="/foo" f-partial="/partials/foo">foo</a>
</li>
<li>
<a href="/bar" f-partial="/partials/bar">bar</a>
</li>
</ul>
);
}
import { defineRoute, RouteConfig } from "$fresh/server.ts";
import { Partial } from "$fresh/runtime.ts";
export const config: RouteConfig = {
skipAppWrapper: true,
skipInheritedLayouts: true,
};
export default defineRoute(async (req, ctx) => {
return (
<Partial name="main">
<h2>Foo</h2>
<p>This is the Foo partial route.</p>
<ul>
<li>
<a href="/bar" f-partial="/partials/bar">bar</a>
</li>
<li>
<a href="/">home</a>
</li>
</ul>
</Partial>
);
});Full example is here. My guessFresh only shows when the route is defined in const manifest = {
routes: {
"./routes/_404.tsx": $_404,
"./routes/_app.tsx": $_app,
"./routes/index.tsx": $index,
"./routes/partials/bar.tsx": $partials_bar,
"./routes/partials/foo.tsx": $partials_foo,
},
islands: {},
baseUrl: import.meta.url,
} satisfies Manifest;Routes for QuestionWhat's the correct way to implement routing with Partial? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
Yup, this is the heart of your problem. In your case you actually don't want designated partial routes as you also want them to be accessible as normal routes. To solve this:
- export const config: RouteConfig = {
- skipAppWrapper: true,
- skipInheritedLayouts: true,
- };
And that's it! I think you got confused by thinking of partials as needing to be special routes. They don't have to be. They can be normal routes too! Where you would want special partial routes instead is for targeted updates which should not be full routes. Think of an e-commerce website where you have a special partial route to update the pricing in the shopping cart. It's not a route you'd navigate to on your own. It's rather conceptually more of an API route with the difference that it returns UI. tl;dr: If you need a full route, use a full route. If you need something more akin to an API call, use a dedicated partial route. |
Beta Was this translation helpful? Give feedback.
-
|
I think I understand now! Thank you! |
Beta Was this translation helpful? Give feedback.
Yup, this is the heart of your problem. In your case you actually don't want designated partial routes as you also want them to be accessible as normal routes. To solve this:
/partialsfolder../routes/partials/bar.tsx->./routes/bar.tsx./routes/partials/foo.tsx->./routes/foo.tsx_apptemplate:<Partial name="main">from both routes as this is already declared…