From 98ec0c18b24b810787c6649ff36ae09a908a6551 Mon Sep 17 00:00:00 2001
From: jbranchaud <jbranchaud@gmail.com>
Date: Thu, 19 May 2022 22:11:55 -0500
Subject: [PATCH] Add Relative And Absolute Paths In Links as a Remix TIL

---
 README.md                                     |  3 +-
 remix/relative-and-absolute-paths-in-links.md | 48 +++++++++++++++++++
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 remix/relative-and-absolute-paths-in-links.md

diff --git a/README.md b/README.md
index c638d3c..4a4e7a1 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186).
 
-_1199 TILs and counting..._
+_1200 TILs and counting..._
 
 ---
 
@@ -907,6 +907,7 @@ _1199 TILs and counting..._
 
 ### Remix
 
+- [Relative And Absolute Paths In Links](remix/relative-and-absolute-paths-in-links.md)
 - [Run The Development Server From Another Port](remix/run-the-development-server-from-another-port.md)
 
 ### RSpec
diff --git a/remix/relative-and-absolute-paths-in-links.md b/remix/relative-and-absolute-paths-in-links.md
new file mode 100644
index 0000000..6372fa0
--- /dev/null
+++ b/remix/relative-and-absolute-paths-in-links.md
@@ -0,0 +1,48 @@
+# Relative And Absolute Paths In Links
+
+Remix has its own routing system built in. The directories and files that you
+place under `app/routes` will all make up the routes of the app. Routes are
+pages in the app. And pages are meant to be linked to.
+
+Remix's `Link` component can handle both relative and absolute paths with the
+`to` prop.
+
+Here is a link with relative path.
+
+```jsx
+// app/routes/posts/index.tsx
+import { Link } from "@remix-run/react";
+
+export default function Posts() {
+  return (
+    <Link to="admin">
+      Admin
+    </Link>
+  )
+}
+```
+
+Because the `Link` is rendered within the `posts/` directory, the link will
+point to `localhost:3000/posts/admin`.
+
+And here is an absolute path.
+
+```jsx
+// app/routes/posts/index.tsx
+import { Link } from "@remix-run/react";
+
+export default function Posts() {
+  return (
+    <Link to="/admin">
+      Admin
+    </Link>
+  )
+}
+```
+
+Notice that the only change was putting a leading slash in front of `admin` in
+the `to` prop. Just like Unix path names, that indicates that the path is an
+absolute one, anchored to the root. It doesn't matter that it is in the
+`/posts` directory. It will point to `localhost:3000/admin`.
+
+[source](https://remix.run/docs/en/v1/tutorials/blog#nested-routing)