feat: support name conventions of next remix releases

Author: ws-rushx

README.md

@@ -6,6 +6,9 @@
 
 >For more information, please refer to the React Router [documentation](https://reactrouter.com/en/main). Note that it follows the Remix file convention.
 
+>**Important**
+although react-router use names `loader`, `action`, `Component` these parts should exported from file as `clientLoader`, `clientAction`, `default`, see example below. use these name for future react-router releases.
+
 ## Install
 
 ```bash
@@ -117,12 +120,14 @@ export const caseSensitive = false
 
 export const id = 'main-page'
 
-export async function loader() {}
+// every `loader` should exported by name `clientLoader` from v2
+export async function clientLoader() {}
 
-export async function action() {}
+// every `action` should exported by name `clientAction` from v2
+export async function clientAction() {}
 
-// every component should exported without default with name `Component`
-export function Component() {
+// every component should exported as `default` no matter what is the name from v2
+export default function Component() {
   return <h1>Hello Remix Router!</h1>
 }
 

playground/app/root.tsx

@@ -3,7 +3,9 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+
+
+export default function Component() {
   return (
     <>
       <h1>test for first page</h1>

playground/app/routes/($lang).dashboard.lazy.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>dashboard</h1>
 }

playground/app/routes/_auth.lazy.tsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>hidden auth layout</h1>

playground/app/routes/_auth.login.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { useLoaderData } from 'react-router-dom'
 
-export async function loader() {
+export async function clientLoader() {
   // sleep 2 seconds then return data
   await new Promise(resolve => setTimeout(resolve, 2000))
   return ['Note 1', 'Note 2', 'Note 3']
 }
 
-export function Component() {
+export default function Component() {
   const notes = useLoaderData() as string[]
 
   return (

playground/app/routes/_index.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
 import { useLoaderData } from 'react-router-dom'
 
-export async function loader() {
+export async function clientLoader() {
   return 'Vite + React'
 }
 
-export function Component() {
+export default function Component() {
   const [count, setCount] = useState(0)
   const data = useLoaderData() as string
 

playground/app/routes/auth.$.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>Splat Route</h1>
 }

playground/app/routes/auth.$test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>Dynamic Route</h1>
 }

playground/app/routes/auth.deploy.lazy.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>deploy</h1>

playground/app/routes/auth.deploy.test.lazy.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>deploy test</h1>
 }