Skip to content

Commit

Permalink
feat!: remove v1 route convention codepaths (#5649)
Browse files Browse the repository at this point in the history
Signed-off-by: Logan McAnsh <logan@mcan.sh>
  • Loading branch information
mcansh authored Mar 23, 2023
1 parent b8e5eaa commit 6ed0879
Show file tree
Hide file tree
Showing 86 changed files with 139 additions and 1,058 deletions.
9 changes: 9 additions & 0 deletions .changeset/remove-v1-routes.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
"remix": major
"@remix-run/dev": major
"@remix-run/react": major
"@remix-run/server-runtime": major
"@remix-run/testing": major
---

remove v1 route convention codepaths
Original file line number Diff line number Diff line change
@@ -1,22 +1,8 @@
---
title: Route File Naming (v2)
title: Route File Naming
---

# Route File Naming (v2)

You can opt-in to the new route file naming convention with a future flag in Remix config. It will be the default behavior in the future when v2 ships. For background on this change, [see the RFC][flatroutes-rfc].

```js filename=remix.config.js
module.exports = {
future: {
v2_routeConvention: true,
},
};
```

We encourage you to make this change early so upgrading is easy. We'll be providing a helper function to use the old convention in v2 if you prefer it.

---
# Route File Naming

While you can configure routes in [remix.config.js][remix-config], most routes are created with this file system convention. Add a file, get a route.

Expand Down
321 changes: 0 additions & 321 deletions docs/file-conventions/routes-files.md

This file was deleted.

6 changes: 3 additions & 3 deletions docs/guides/data-loading.md
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ export { db };

And then your routes can import it and make queries against it:

```tsx filename=app/routes/products/$categoryId.tsx
```tsx filename=app/routes/products.$categoryId.tsx
import type { LoaderArgs } from "@remix-run/node"; // or cloudflare/deno
import { json } from "@remix-run/node"; // or cloudflare/deno
import { useLoaderData } from "@remix-run/react";
Expand Down Expand Up @@ -176,7 +176,7 @@ export default function ProductCategory() {

If you are using TypeScript, you can use type inference to use Prisma Client generated types when calling `useLoaderData`. This allows better type safety and intellisense when writing code that uses the loaded data.

```tsx filename=app/routes/products/$productId.tsx
```tsx filename=app/routes/products.$productId.tsx
import type { LoaderArgs } from "@remix-run/node"; // or cloudflare/deno
import { json } from "@remix-run/node"; // or cloudflare/deno
import { useLoaderData } from "@remix-run/react";
Expand Down Expand Up @@ -324,7 +324,7 @@ Sometimes you need to read and change the search params from your component inst

Perhaps the most common way to set search params is letting the user control them with a form:

```tsx filename=app/routes/products/shoes.tsx lines=[8,9,16,17]
```tsx filename=app/routes/products.shoes.tsx lines=[8,9,16,17]
export default function ProductFilters() {
return (
<Form method="get">
Expand Down
2 changes: 1 addition & 1 deletion docs/guides/data-writes.md
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ Whether you use `<form>` or `<Form>` though, you write the very same code. You c

Let's start with our project form from earlier but make it usable:

Let's say you've got the route `app/routes/projects/new.js` with this form in it:
Let's say you've got the route `app/routes/projects.new.js` with this form in it:

```tsx
export default function NewProject() {
Expand Down
Loading

0 comments on commit 6ed0879

Please # to comment.