` has nothing to render because no children match. You can think of index routes as the default child route to fill in that space.
-👉 **Create an index route for the root route**
+💿 **Create an index route for the root route**
```
touch app/routes/_index.tsx
```
-👉 **Fill in the index component's elements**
+💿 **Fill in the index component's elements**
-Feel free to copy paste, nothing special here.
+Feel free to copy/paste, nothing special here.
-```jsx filename=app/routes/_index.tsx
+```tsx filename=app/routes/_index.tsx
export default function Index() {
return (
@@ -915,41 +1021,35 @@ The route name `_index` is special. It tells Remix to match and render this rout
-Voila! No more blank space. It's common to put dashboards, stats, feeds, etc. at index routes. They can participate in data loading as well.
+Voilà! No more blank space. It's common to put dashboards, stats, feeds, etc. at index routes. They can participate in data loading as well.
## Cancel Button
On the edit page we've got a cancel button that doesn't do anything yet. We'd like it to do the same thing as the browser's back button.
-We'll need a click handler on the button as well as [`useNavigate`][usenavigate].
+We'll need a click handler on the button as well as [`useNavigate`][use-navigate].
-👉 **Add the cancel button click handler with `useNavigate`**
+💿 **Add the cancel button click handler with `useNavigate`**
-```jsx filename=app/routes/contacts.$contactId.edit.tsx lines=[1,7,17-19]
+```tsx filename=app/routes/contacts.$contactId_.edit.tsx lines=[5,11,18]
+// existing imports
import {
Form,
useLoaderData,
- useNavigation,
+ useNavigate,
} from "@remix-run/react";
+// existing imports & exports
-/* existing code*/
-
-export default function Edit() {
- const contact = useLoaderData();
+export default function EditContact() {
+ const { contact } = useLoaderData();
const navigate = useNavigate();
return (
-
-👉 **Every time you see this it means you need to do something in the app!**
+💿 **Every time you see this it means you need to do something in the app!**
The rest is just there for your information and deeper understanding. Let's get to it.
## Setup
-👉 **Generate a basic template**
+💿 **Generate a basic template**
```shellscript nonumber
npx create-remix@latest --template ryanflorence/remix-tutorial-template
```
-This uses a pretty bare-bones template but includes our css and data model so we can focus on Remix. The [Quick Start][quickstart] can familiarize you with the basic setup of a Remix project if you'd like to learn more.
+This uses a pretty bare-bones template but includes our css and data model, so we can focus on Remix. The [Quick Start][quickstart] can familiarize you with the basic setup of a Remix project if you'd like to learn more.
-👉 **Start the app**
+💿 **Start the app**
```shellscript nonumber
# cd into the app directory
@@ -48,24 +48,24 @@ Note the file at `app/root.tsx`. This is what we call the "Root Route". It's the