feat(example): pathless routes (remix-run#1421)

carlosloureda · Jan 12, 2022 · 8b86f38 · 8b86f38
1 parent ad32e46
commit 8b86f38
Show file tree

Hide file tree

Showing 15 changed files with 9,459 additions and 0 deletions.
diff --git a/examples/pathless-routes/.gitignore b/examples/pathless-routes/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+
+/.cache
+/build
+/public/build
diff --git a/examples/pathless-routes/README.md b/examples/pathless-routes/README.md
@@ -0,0 +1,47 @@
+# Pathless Routes
+
+A simple example demonstrates the usage of the pathless route to create layout wrappers.
+
+## Preview
+
+Open this example on [CodeSandbox](https://codesandbox.com):
+
+[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/remix-run/remix/tree/main/examples/pathless-routes)
+
+## Example
+
+One of the features of React Router is the ability to have `pathless routes`. This gives the ability to add route layouts without adding segments to the URL.
+
+In this example, we are going to look at a common use case of building a blog with Remix built-in MDX compiler. We have a [index route](./app/routes/index.tsx) which serves as our Home page, and we have a [articles section](./app/routes/articles.tsx) which lists all the articles we have, and also serves as a layout for the articles section.
+
+Let's say we want to wrap each article with some styles. Due to the way MDX routes works in Remix, there is no way to include styles directly into the MDX file. We can instead create a pathless route and add our styles there.
+
+Our file system based routes are structured as below
+
+```sh
+app
+├── entry.client.tsx
+├── entry.server.tsx
+├── root.tsx
+└── routes
+    ├── articles
+    │   ├── __layout
+    │   │   └── hello.md
+    │   └── __layout.tsx
+    ├── articles.tsx
+    └── index.tsx
+```
+
+| URL             | Matched Route                           |
+| --------------- | --------------------------------------- |
+| /               | app/routes/index.tsx                    |
+| /articles       | app/routes/articles.tsx                 |
+| /articles/hello | app/routes/articles/\_\_layout/hello.md |
+
+Here `app/routes/articles/__layout.tsx` will add a pathless route, and acts as a wrapper for all the routes inside `app/routes/articles/__layout/`.
+
+## Related Links
+
+- [Pathless Routes](https://remix.run/docs/en/v1/api/conventions#pathless-layout-routes)
+- [Layout Routes](https://remix.run/docs/en/v1/api/conventions#layout-routes)
+- [Remix MD/MDX](https://remix.run/docs/en/v1/guides/mdx)
diff --git a/examples/pathless-routes/app/entry.client.tsx b/examples/pathless-routes/app/entry.client.tsx
@@ -0,0 +1,4 @@
+import { hydrate } from "react-dom";
+import { RemixBrowser } from "remix";
+
+hydrate(<RemixBrowser />, document);
diff --git a/examples/pathless-routes/app/entry.server.tsx b/examples/pathless-routes/app/entry.server.tsx
@@ -0,0 +1,21 @@
+import { renderToString } from "react-dom/server";
+import { RemixServer } from "remix";
+import type { EntryContext } from "remix";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  const markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders
+  });
+}
diff --git a/examples/pathless-routes/app/root.tsx b/examples/pathless-routes/app/root.tsx
@@ -0,0 +1,42 @@
+import {
+  Links,
+  LiveReload,
+  Meta,
+  NavLink,
+  Outlet,
+  Scripts,
+  ScrollRestoration
+} from "remix";
+
+const Nav = () => {
+  return (
+    <header>
+      <nav>
+        <NavLink to="/" end>
+          Home
+        </NavLink>
+        <NavLink to="/articles">Articles</NavLink>
+      </nav>
+    </header>
+  );
+};
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Nav />
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        {process.env.NODE_ENV === "development" && <LiveReload />}
+      </body>
+    </html>
+  );
+}
diff --git a/examples/pathless-routes/app/routes/articles.tsx b/examples/pathless-routes/app/routes/articles.tsx
@@ -0,0 +1,19 @@
+import { Link, Outlet } from "remix";
+import type { MetaFunction } from "remix";
+import { attributes } from "./articles/__layout/hello.md";
+
+export const meta: MetaFunction = () => {
+  return { title: "Articles" };
+};
+
+export default function () {
+  return (
+    <>
+      <div>
+        <h2>Articles</h2>
+        <Link to={attributes.slug}>{attributes.meta.title}</Link>
+      </div>
+      <Outlet />
+    </>
+  );
+}
diff --git a/examples/pathless-routes/app/routes/articles/__layout.tsx b/examples/pathless-routes/app/routes/articles/__layout.tsx
@@ -0,0 +1,9 @@
+import { Outlet } from "remix";
+
+export default function () {
+  return (
+    <div style={{ color: "red" }}>
+      <Outlet />
+    </div>
+  );
+}
diff --git a/examples/pathless-routes/app/routes/articles/__layout/hello.md b/examples/pathless-routes/app/routes/articles/__layout/hello.md
@@ -0,0 +1,7 @@
+---
+slug: hello
+meta:
+  title: Hello
+---
+
+# Hello Remix
diff --git a/examples/pathless-routes/app/routes/index.tsx b/examples/pathless-routes/app/routes/index.tsx
@@ -0,0 +1,9 @@
+import type { MetaFunction } from "remix";
+
+export const meta: MetaFunction = () => {
+  return { title: "Home" };
+};
+
+export default function () {
+  return <h2>Home</h2>;
+}