Migrate from remix-flat-routes to react-router-auto-routes (#1051)

Co-authored-by: Kent C. Dodds <[email protected]>

Author: kenn

app/root.tsx

@@ -26,7 +26,7 @@ import {
 	ThemeSwitch,
 	useOptionalTheme,
 	useTheme,
-} from './routes/resources+/theme-switch.tsx'
+} from './routes/resources/theme-switch.tsx'
 import tailwindStyleSheetUrl from './styles/tailwind.css?url'
 import { getUserId, logout } from './utils/auth.server.ts'
 import { ClientHintCheck, getHints } from './utils/client-hints.tsx'
@@ -190,7 +190,7 @@ function App() {
 	const user = useOptionalUser()
 	const theme = useTheme()
 	const matches = useMatches()
-	const isOnSearchPage = matches.find((m) => m.id === 'routes/users+/index')
+	const isOnSearchPage = matches.find((m) => m.id === 'routes/users/index')
 	const searchBar = isOnSearchPage ? null : <SearchBar status="idle" />
 	useToast(data.toast)
 

app/routes.ts

@@ -1,21 +1,18 @@
 import { type RouteConfig } from '@react-router/dev/routes'
-import { remixRoutesOptionAdapter } from '@react-router/remix-routes-option-adapter'
-import { flatRoutes } from 'remix-flat-routes'
+import { autoRoutes } from 'react-router-auto-routes'
 
-export default remixRoutesOptionAdapter((defineRoutes) => {
-	return flatRoutes('routes', defineRoutes, {
-		ignoredRouteFiles: [
-			'.*',
-			'**/*.css',
-			'**/*.test.{js,jsx,ts,tsx}',
-			'**/__*.*',
-			// This is for server-side utilities you want to colocate
-			// next to your routes without making an additional
-			// directory. If you need a route that includes "server" or
-			// "client" in the filename, use the escape brackets like:
-			// my-route.[server].tsx
-			'**/*.server.*',
-			'**/*.client.*',
-		],
-	})
+export default autoRoutes({
+	ignoredRouteFiles: [
+		'.*',
+		'**/*.css',
+		'**/*.test.{js,jsx,ts,tsx}',
+		'**/__*.*',
+		// This is for server-side utilities you want to colocate
+		// next to your routes without making an additional
+		// directory. If you need a route that includes "server" or
+		// "client" in the filename, use the escape brackets like:
+		// my-route.[server].tsx
+		'**/*.server.*',
+		'**/*.client.*',
+	],
 }) satisfies RouteConfig

…s/_auth+/auth.$provider.callback.test.ts …es/_auth/auth.$provider.callback.test.tsapp/routes/_auth+/auth.$provider.callback.test.ts renamed to app/routes/_auth/auth.$provider.callback.test.ts app/routes/_auth+/auth.$provider.callback.test.ts renamed to app/routes/_auth/auth.$provider.callback.test.ts

@@ -3,7 +3,7 @@ import { faker } from '@faker-js/faker'
 import { SetCookie } from '@mjackson/headers'
 import { http } from 'msw'
 import { afterEach, expect, test } from 'vitest'
-import { twoFAVerificationType } from '#app/routes/settings+/profile.two-factor.tsx'
+import { twoFAVerificationType } from '#app/routes/settings/profile/two-factor/_layout.tsx'
 import { getSessionExpirationDate, sessionKey } from '#app/utils/auth.server.ts'
 import { GITHUB_PROVIDER_NAME } from '#app/utils/connections.tsx'
 import { prisma } from '#app/utils/db.server.ts'

…routes/_auth+/auth.$provider.callback.ts …/routes/_auth/auth.$provider.callback.tsapp/routes/_auth+/auth.$provider.callback.ts renamed to app/routes/_auth/auth.$provider.callback.ts app/routes/_auth+/auth.$provider.callback.ts renamed to app/routes/_auth/auth.$provider.callback.ts

@@ -1,7 +1,7 @@
 import { invariant } from '@epic-web/invariant'
 import { redirect } from 'react-router'
 import { safeRedirect } from 'remix-utils/safe-redirect'
-import { twoFAVerificationType } from '#app/routes/settings+/profile.two-factor.tsx'
+import { twoFAVerificationType } from '#app/routes/settings/profile/two-factor/_layout.tsx'
 import { getUserId, sessionKey } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { combineResponseInits } from '#app/utils/misc.tsx'