feat: match.useRoute() for relative route usage, match.loader for one…

…-off loader calling, fix path resolution bug,

examples/react/basic/src/main.tsx

@@ -17,7 +17,10 @@ type PostType = {
 }
 
 const routeConfig = createRouteConfig().createChildren((createRoute) => [
-  createRoute({ path: '/', element: <Index /> }),
+  createRoute({
+    path: '/',
+    element: <Index />,
+  }),
   createRoute({
     path: 'posts',
     element: <Posts />,

examples/react/kitchen-sink-codesplit/src/main.tsx

@@ -19,6 +19,10 @@ function App() {
     'defaultPendingMinMs',
     500,
   )
+  const [defaultLoaderMaxAge, setDefaultLoaderMaxAge] = useSessionStorage(
+    'defaultLoaderMaxAge',
+    5000,
+  )
   const [defaultPreloadMaxAge, setDefaultPreloadMaxAge] = useSessionStorage(
     'defaultPreloadMaxAge',
     2000,
@@ -82,7 +86,22 @@ function App() {
           />
         </div>
         <div>
-          Link Preload Max Age:{' '}
+          Loader Max Age:{' '}
+          {defaultLoaderMaxAge ? `${defaultLoaderMaxAge}ms` : 'Off'}
+        </div>
+        <div>
+          <input
+            type="range"
+            min="0"
+            max="10000"
+            step="250"
+            value={defaultLoaderMaxAge}
+            onChange={(e) => setDefaultLoaderMaxAge(e.target.valueAsNumber)}
+            className={`w-full`}
+          />
+        </div>
+        <div>
+          Preload Max Age:{' '}
           {defaultPreloadMaxAge ? `${defaultPreloadMaxAge}ms` : 'Off'}
         </div>
         <div>
@@ -105,6 +124,7 @@ function App() {
               <Spinner />
             </div>
           }
+          defaultLoaderMaxAge={defaultLoaderMaxAge}
           defaultPreloadMaxAge={defaultPreloadMaxAge}
           defaultPendingMs={defaultPendingMs}
           defaultPendingMinMs={defaultPendingMinMs}
@@ -137,7 +157,9 @@ function Root() {
         {/* Show a global spinner when the router is transitioning */}
         <div
           className={`text-3xl duration-100 delay-0 opacity-0 ${
-            routerState.status === 'loading' ? ` duration-300 opacity-40` : ''
+            routerState.status === 'loading' || routerState.isFetching
+              ? ` duration-300 opacity-40`
+              : ''
           }`}
         >
           <Spinner />

examples/react/kitchen-sink-codesplit/src/routes/dashboard/invoices/index.tsx

@@ -1,10 +1,8 @@
-import { createRouteConfig, Outlet } from '@tanstack/react-router'
+import { Outlet } from '@tanstack/react-router'
 import * as React from 'react'
 import { router } from '../../../router'
 import { Spinner } from '../../../components/Spinner'
 import { dashboardRoute } from '..'
-import { invoicesIndexRoute } from './invoices'
-import { invoiceRoute } from './invoice'
 
 export const invoicesRoute = dashboardRoute.createRoute({
   path: 'invoices',
@@ -16,11 +14,12 @@ function Invoices() {
     loaderData: { invoices },
     Link,
     MatchRoute,
+    useRoute,
   } = router.useMatch(invoicesRoute.id)
 
   // Get the action for a child route
-  const invoiceIndexRoute = router.useRoute(invoicesIndexRoute.id)
-  const invoiceDetailRoute = router.useRoute(invoiceRoute.id)
+  const invoiceIndexRoute = useRoute('./')
+  const invoiceDetailRoute = useRoute('./:invoiceId')
 
   return (
     <div className="flex-1 flex">

examples/react/kitchen-sink-codesplit/src/routes/dashboard/invoices/invoice.tsx

@@ -38,7 +38,7 @@ function InvoiceView() {
     search,
     Link,
     navigate,
-  } = router.useMatch(invoiceRoute)
+  } = router.useMatch(invoiceRoute.id)
 
   const [notes, setNotes] = React.useState(search.notes ?? ``)
 

examples/react/kitchen-sink-codesplit/src/routes/dashboard/invoices/invoices.tsx

@@ -21,7 +21,7 @@ export const invoicesIndexRoute = invoicesRoute.createRoute({
 })
 
 function InvoicesHome() {
-  const { action } = router.useMatch('/dashboard/invoices/')
+  const { action } = router.useMatch(invoicesIndexRoute.id)
 
   return (
     <>

examples/react/kitchen-sink-codesplit/src/routes/expensive/Expensive.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-export function Expensive() {
+export default function Expensive() {
   return (
     <div className={`p-2`}>
       I am an "expensive" component... which really just means that I was

examples/react/kitchen-sink-codesplit/src/routes/expensive/index.tsx

@@ -5,6 +5,5 @@ import { loaderDelayFn } from '../../utils'
 export const expensiveRoute = createRouteConfig().createRoute({
   // Your elements can be asynchronous, which means you can code-split!
   path: 'expensive',
-  element: () =>
-    loaderDelayFn(() => import('./Expensive')).then((res) => <res.Expensive />),
+  element: () => loaderDelayFn(() => import('./Expensive')),
 })

examples/react/kitchen-sink/src/main.tsx

@@ -191,6 +191,10 @@ function App() {
     'defaultPendingMinMs',
     500,
   )
+  const [defaultLoaderMaxAge, setDefaultLoaderMaxAge] = useSessionStorage(
+    'defaultLoaderMaxAge',
+    5000,
+  )
   const [defaultPreloadMaxAge, setDefaultPreloadMaxAge] = useSessionStorage(
     'defaultPreloadMaxAge',
     2000,
@@ -254,7 +258,22 @@ function App() {
           />
         </div>
         <div>
-          Link Preload Max Age:{' '}
+          Loader Max Age:{' '}
+          {defaultLoaderMaxAge ? `${defaultLoaderMaxAge}ms` : 'Off'}
+        </div>
+        <div>
+          <input
+            type="range"
+            min="0"
+            max="10000"
+            step="250"
+            value={defaultLoaderMaxAge}
+            onChange={(e) => setDefaultLoaderMaxAge(e.target.valueAsNumber)}
+            className={`w-full`}
+          />
+        </div>
+        <div>
+          Preload Max Age:{' '}
           {defaultPreloadMaxAge ? `${defaultPreloadMaxAge}ms` : 'Off'}
         </div>
         <div>
@@ -283,6 +302,7 @@ function App() {
             </div>
           }
           defaultPreload="intent"
+          defaultLoaderMaxAge={defaultLoaderMaxAge}
           defaultPreloadMaxAge={defaultPreloadMaxAge}
           defaultPendingMs={defaultPendingMs}
           defaultPendingMinMs={defaultPendingMinMs}

examples/react/with-react-query/.gitignore

@@ -1,26 +1,5 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-yarn.lock
-package-lock.json
-
-# misc
+node_modules
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+dist
+dist-ssr
+*.local

examples/react/with-react-query/README.md

@@ -3,4 +3,4 @@
 To run this example:
 
 - `npm install` or `yarn`
-- `npm start` or `yarn start`
+- `yarn start` or `yarn start`

examples/react/with-react-query/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/react/with-react-query/package.json

@@ -1,40 +1,26 @@
 {
+  "name": "tanstack-router-react-example-with-react-query",
+  "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "rescripts start",
-    "build": "rescripts build",
-    "test": "rescripts test",
-    "eject": "rescripts eject"
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
   },
   "dependencies": {
-    "@types/react": "^17.0.33",
-    "@types/react-dom": "^17.0.10",
-    "axios": "^0.21.1",
-    "broadcast-channel": "^3.4.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "@tanstack/react-query": "^4.14.1",
+    "@tanstack/react-query-devtools": "^4.14.1",
     "@tanstack/react-router": "0.0.1-alpha.9",
-    "react-query": "^3.5.0",
-    "react-scripts": "3.0.1",
-    "stop-runaway-react-effects": "^1.2.0",
-    "styled-components": "^4.3.2"
-  },
-  "devDependencies": {
-    "@rescripts/cli": "^0.0.11",
-    "@rescripts/rescript-use-babel-config": "^0.0.8",
-    "@rescripts/rescript-use-eslint-config": "^0.0.9",
-    "babel-eslint": "10.0.1"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "@tanstack/react-router-devtools": "0.0.1-alpha.8",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
+    "@vitejs/plugin-react": "^1.1.3",
+    "axios": "^1.1.3",
+    "immer": "^9.0.15",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vite": "^2.8.6",
+    "zod": "^3.19.1"
   }
 }