diff --git a/examples/react/basic-ssr/package.json b/examples/react/basic-ssr/package.json
index d9526572cb..a0c97c7fa4 100644
--- a/examples/react/basic-ssr/package.json
+++ b/examples/react/basic-ssr/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@tanstack/react-router": "0.0.1-beta.8",
+    "@tanstack/react-router-devtools": "0.0.1-beta.8",
     "axios": "^1.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
diff --git a/examples/react/basic-ssr/server.js b/examples/react/basic-ssr/server.js
index 00d6c3ce99..d5185d21c1 100644
--- a/examples/react/basic-ssr/server.js
+++ b/examples/react/basic-ssr/server.js
@@ -61,7 +61,13 @@ export async function createServer(
     try {
       const url = req.originalUrl
 
+      if (url.includes('.')) {
+        console.warn(`${url} is not valid router path`)
+        return res.status(404)
+      }
+
       let template, render
+
       if (!isProd) {
         // always read fresh template in dev
         template = fs.readFileSync(resolve('index.html'), 'utf-8')
diff --git a/examples/react/basic-ssr/src/App.tsx b/examples/react/basic-ssr/src/App.tsx
index 06e3603652..d548a76067 100644
--- a/examples/react/basic-ssr/src/App.tsx
+++ b/examples/react/basic-ssr/src/App.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { Outlet } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 
 import { router } from './router'
 
@@ -28,6 +29,7 @@ export function App() {
       </div>
       <hr />
       <Outlet />
+      <TanStackRouterDevtools router={router} />
     </>
   )
 }
diff --git a/examples/react/basic-ssr/src/entry-server.tsx b/examples/react/basic-ssr/src/entry-server.tsx
index 8114409d8b..4627904325 100644
--- a/examples/react/basic-ssr/src/entry-server.tsx
+++ b/examples/react/basic-ssr/src/entry-server.tsx
@@ -14,12 +14,12 @@ export async function render(url: string) {
     history: memoryHistory,
   })
 
-  router.mount()
+  const unsub = router.mount()
+  await router.load()
 
-  await router.loadLocation()
   const routerState = router.dehydrateState()
 
-  return [
+  const res = [
     `<script>window.__TANSTACK_ROUTER_STATE__ = JSON.parse(${jsesc(
       JSON.stringify(routerState),
       {
@@ -34,4 +34,9 @@ export async function render(url: string) {
       </RouterProvider>,
     ),
   ]
+
+  unsub()
+  router.reset()
+
+  return res
 }
diff --git a/examples/react/basic-ssr/src/routeConfig.tsx b/examples/react/basic-ssr/src/routeConfig.tsx
index 6ab2fa69a1..293c57f37a 100644
--- a/examples/react/basic-ssr/src/routeConfig.tsx
+++ b/examples/react/basic-ssr/src/routeConfig.tsx
@@ -39,7 +39,7 @@ export const routeConfig = createRouteConfig().createChildren((createRoute) => [
 
 async function fetchPosts() {
   console.log('Fetching posts...')
-  await new Promise((r) => setTimeout(r, 500))
+  await new Promise((r) => setTimeout(r, Math.round(Math.random() * 300)))
   return axios
     .get<PostType[]>('https://jsonplaceholder.typicode.com/posts')
     .then((r) => r.data.slice(0, 10))
@@ -47,7 +47,7 @@ async function fetchPosts() {
 
 async function fetchPostById(postId: string) {
   console.log(`Fetching post with id ${postId}...`)
-  await new Promise((r) => setTimeout(r, 500))
+  await new Promise((r) => setTimeout(r, Math.round(Math.random() * 300)))
 
   return await axios
     .get<PostType>(`https://jsonplaceholder.typicode.com/posts/${postId}`)
diff --git a/examples/react/kitchen-sink/src/main.tsx b/examples/react/kitchen-sink/src/main.tsx
index 32743432b9..65b5f26ce7 100644
--- a/examples/react/kitchen-sink/src/main.tsx
+++ b/examples/react/kitchen-sink/src/main.tsx
@@ -50,15 +50,7 @@ const routeConfig = createRouteConfig().createChildren((createRoute) => [
         path: '/',
         element: <InvoicesHome />,
         action: async (partialInvoice: Partial<Invoice>) => {
-          const invoice = await postInvoice(partialInvoice)
-          // // Redirect to the new invoice
-          router.navigate({
-            to: '/dashboard/invoices/:invoiceId',
-            params: {
-              invoiceId: invoice.id,
-            },
-          })
-          return invoice
+          return postInvoice(partialInvoice)
         },
       }),
       createRoute({
@@ -133,9 +125,7 @@ const routeConfig = createRouteConfig().createChildren((createRoute) => [
     // Your elements can be asynchronous, which means you can code-split!
     path: 'expensive',
     element: () =>
-      loaderDelayFn(() => import('./Expensive')).then((res) => (
-        <res.Expensive />
-      )),
+      loaderDelayFn(() => import('./Expensive').then((d) => <d.Expensive />)),
   }),
   // Obviously, you can put routes in other files, too
   // reallyExpensiveRoute,
@@ -484,14 +474,19 @@ function Invoices() {
   } = router.useMatch('/dashboard/invoices')
 
   // Get the action for a child route
-  const invoiceIndexRoute = router.useRoute('/dashboard/invoices/')
-  const invoiceDetailRoute = router.useRoute('/dashboard/invoices/:invoiceId')
+  const invoiceIndexMatch = router.useMatch('/dashboard/invoices/', {
+    strict: false,
+  })
+
+  const invoiceDetailMatch = router.useMatch('/dashboard/invoices/:invoiceId', {
+    strict: false,
+  })
 
   return (
     <div className="flex-1 flex">
       <div className="divide-y w-48">
         {invoices?.map((invoice) => {
-          const foundPending = invoiceDetailRoute.action.pending.find(
+          const foundPending = invoiceDetailMatch?.action.submissions.find(
             (d) => d.submission?.id === invoice.id,
           )
 
@@ -530,7 +525,7 @@ function Invoices() {
             </div>
           )
         })}
-        {invoiceIndexRoute.action.pending.map((action) => (
+        {invoiceIndexMatch?.action.submissions.map((action) => (
           <div key={action.submittedAt}>
             <a href="#" className="block py-2 px-3 text-blue-700">
               <pre className="text-sm">
@@ -558,10 +553,13 @@ function InvoicesHome() {
             event.preventDefault()
             event.stopPropagation()
             const formData = new FormData(event.target as HTMLFormElement)
-            action.submit({
-              title: formData.get('title') as string,
-              body: formData.get('body') as string,
-            })
+            action.submit(
+              {
+                title: formData.get('title') as string,
+                body: formData.get('body') as string,
+              },
+              { multi: true },
+            )
           }}
           className="space-y-2"
         >
@@ -597,7 +595,6 @@ function InvoiceView() {
     search,
     Link,
     navigate,
-    params,
   } = router.useMatch('/dashboard/invoices/:invoiceId')
 
   const [notes, setNotes] = React.useState(search.notes ?? ``)
@@ -664,19 +661,17 @@ function InvoiceView() {
           Save
         </button>
       </div>
-      {action.current?.submission?.id === invoice.id ? (
-        <div key={action.current?.submittedAt}>
-          {action.current?.status === 'success' ? (
-            <div className="inline-block px-2 py-1 rounded bg-green-500 text-white animate-bounce [animation-iteration-count:2.5] [animation-duration:.3s]">
-              Saved!
-            </div>
-          ) : action.current?.status === 'error' ? (
-            <div className="inline-block px-2 py-1 rounded bg-red-500 text-white animate-bounce [animation-iteration-count:2.5] [animation-duration:.3s]">
-              Failed to save.
-            </div>
-          ) : null}
-        </div>
-      ) : null}
+      <div key={action.current?.submittedAt}>
+        {action.current?.status === 'success' ? (
+          <div className="inline-block px-2 py-1 rounded bg-green-500 text-white animate-bounce [animation-iteration-count:2.5] [animation-duration:.3s]">
+            Saved!
+          </div>
+        ) : action.current?.status === 'error' ? (
+          <div className="inline-block px-2 py-1 rounded bg-red-500 text-white animate-bounce [animation-iteration-count:2.5] [animation-duration:.3s]">
+            Failed to save.
+          </div>
+        ) : null}
+      </div>
     </form>
   )
 }
diff --git a/packages/react-router-devtools/src/devtools.tsx b/packages/react-router-devtools/src/devtools.tsx
index 79bcbd3de3..2f313c7779 100644
--- a/packages/react-router-devtools/src/devtools.tsx
+++ b/packages/react-router-devtools/src/devtools.tsx
@@ -97,8 +97,8 @@ function Logo(props: React.HTMLProps<HTMLDivElement>) {
         display: 'flex',
         alignItems: 'center',
         flexDirection: 'column',
-        fontSize: '0.7rem',
-        fontWeight: '900',
+        fontSize: '0.8rem',
+        fontWeight: 'bolder',
         lineHeight: '1',
       }}
     >
@@ -110,8 +110,15 @@ function Logo(props: React.HTMLProps<HTMLDivElement>) {
         TANSTACK
       </div>
       <div
-        className="text-transparent bg-clip-text bg-gradient-to-r from-lime-500 to-emerald-500"
         style={{
+          backgroundImage:
+            'linear-gradient(to right, var(--tw-gradient-stops))',
+          '--tw-gradient-from': '#84cc16',
+          '--tw-gradient-stops':
+            'var(--tw-gradient-from), var(--tw-gradient-to)',
+          '--tw-gradient-to': '#10b981',
+          WebkitBackgroundClip: 'text',
+          color: 'transparent',
           letterSpacing: '0.1rem',
           marginRight: '-0.2rem',
         }}
@@ -447,7 +454,6 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
 
   return (
     <ThemeProvider theme={theme}>
-      <script src="https://cdn.tailwindcss.com"></script>
       <Panel ref={ref} className="TanStackRouterDevtoolsPanel" {...panelProps}>
         <style
           dangerouslySetInnerHTML={{
@@ -521,8 +527,12 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
           }}
         >
           <div
-            className="flex justify-start gap-2 p-2 items-center"
             style={{
+              display: 'flex',
+              justifyContent: 'start',
+              gap: '1rem',
+              padding: '1rem',
+              alignItems: 'center',
               background: theme.backgroundAlt,
             }}
           >
diff --git a/packages/react-router/src/index.tsx b/packages/react-router/src/index.tsx
index 373360ce01..e285c1c942 100644
--- a/packages/react-router/src/index.tsx
+++ b/packages/react-router/src/index.tsx
@@ -50,9 +50,17 @@ declare module '@tanstack/router-core' {
     useRoute: <TId extends keyof TAllRouteInfo['routeInfoById']>(
       routeId: TId,
     ) => Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
-    useMatch: <TId extends keyof TAllRouteInfo['routeInfoById']>(
+    useMatch: <
+      TId extends keyof TAllRouteInfo['routeInfoById'],
+      TStrict extends true | false = true,
+    >(
       routeId: TId,
-    ) => RouteMatch<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
+      opts?: { strict?: TStrict },
+    ) => TStrict extends true
+      ? RouteMatch<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
+      :
+          | RouteMatch<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
+          | undefined
     linkProps: <TTo extends string = '.'>(
       props: LinkPropsOptions<TAllRouteInfo, '/', TTo> &
         React.AnchorHTMLAttributes<HTMLAnchorElement>,
@@ -99,6 +107,7 @@ declare module '@tanstack/router-core' {
         TResolved,
         ToIdOption<TAllRouteInfo, TRouteInfo['id'], TTo>
       >,
+      opts?: { strict?: boolean },
     ) => Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TResolved]>
     linkProps: <TTo extends string = '.'>(
       props: LinkPropsOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo> &
@@ -349,7 +358,7 @@ export function createReactRouter<
           useRouterSubscription(router)
           return router.state
         },
-        useMatch: (routeId) => {
+        useMatch: (routeId, opts) => {
           useRouterSubscription(router)
 
           invariant(
@@ -357,32 +366,30 @@ export function createReactRouter<
             `"${rootRouteId}" cannot be used with useMatch! Did you mean to useRoute("${rootRouteId}")?`,
           )
 
-          const runtimeMatch = useMatch()
+          const runtimeMatch = useMatches()?.[0]!
           const match = router.state.matches.find((d) => d.routeId === routeId)
 
-          invariant(
-            match,
-            `Could not find a match for route "${
-              routeId as string
-            }" being rendered in this component!`,
-          )
-
-          invariant(
-            runtimeMatch.routeId == match?.routeId,
-            `useMatch('${
-              match?.routeId as string
-            }') is being called in a component that is meant to render the '${
-              runtimeMatch.routeId
-            }' route. Did you mean to 'useRoute(${
-              match?.routeId as string
-            })' instead?`,
-          )
-
-          if (!match) {
-            invariant('Match not found!')
+          if (opts?.strict ?? true) {
+            invariant(
+              match,
+              `Could not find an active match for "${routeId as string}"!`,
+            )
+
+            invariant(
+              runtimeMatch.routeId == match?.routeId,
+              `useMatch('${
+                match?.routeId as string
+              }') is being called in a component that is meant to render the '${
+                runtimeMatch.routeId
+              }' route. Did you mean to 'useMatch(${
+                match?.routeId as string
+              }, { strict: false })' or 'useRoute(${
+                match?.routeId as string
+              })' instead?`,
+            )
           }
 
-          return match
+          return match as any
         },
       }
 
@@ -430,9 +437,10 @@ export function RouterProvider<
   router.update(rest)
 
   useRouterSubscription(router)
-
   useLayoutEffect(() => {
-    return router.mount()
+    const unsub = router.mount()
+    router.load()
+    return unsub
   }, [router])
 
   return (
@@ -457,57 +465,41 @@ function useMatches(): RouteMatch[] {
   return React.useContext(matchesContext)
 }
 
-// function useParentMatches(): RouteMatch[] {
-//   const router = useRouter()
-//   const match = useMatch()
-//   const matches = router.state.matches
-//   return matches.slice(
-//     0,
-//     matches.findIndex((d) => d.matchId === match.matchId) - 1,
-//   )
-// }
-
-function useMatch<T>(): RouteMatch {
-  return useMatches()?.[0] as RouteMatch
-}
-
 export function Outlet() {
   const router = useRouter()
-  const [, ...matches] = useMatches()
+  const matches = useMatches().slice(1)
+  const match = matches[0]
 
-  const childMatch = matches[0]
-
-  if (!childMatch) return null
+  if (!match) {
+    return null
+  }
 
   const element = ((): React.ReactNode => {
-    if (!childMatch) {
+    if (!match) {
       return null
     }
 
     const errorElement =
-      childMatch.__.errorElement ?? router.options.defaultErrorElement
+      match.__.errorElement ?? router.options.defaultErrorElement
 
-    if (childMatch.status === 'error') {
+    if (match.status === 'error') {
       if (errorElement) {
         return errorElement as any
       }
 
-      if (
-        childMatch.options.useErrorBoundary ||
-        router.options.useErrorBoundary
-      ) {
-        throw childMatch.error
+      if (match.options.useErrorBoundary || router.options.useErrorBoundary) {
+        throw match.error
       }
 
-      return <DefaultErrorBoundary error={childMatch.error} />
+      return <DefaultErrorBoundary error={match.error} />
     }
 
-    if (childMatch.status === 'loading' || childMatch.status === 'idle') {
-      if (childMatch.isPending) {
+    if (match.status === 'loading' || match.status === 'idle') {
+      if (match.isPending) {
         const pendingElement =
-          childMatch.__.pendingElement ?? router.options.defaultPendingElement
+          match.__.pendingElement ?? router.options.defaultPendingElement
 
-        if (childMatch.options.pendingMs || pendingElement) {
+        if (match.options.pendingMs || pendingElement) {
           return (pendingElement as any) ?? null
         }
       }
@@ -515,14 +507,16 @@ export function Outlet() {
       return null
     }
 
-    return (childMatch.__.element as any) ?? router.options.defaultElement
+    return (
+      (match.__.element as any) ?? router.options.defaultElement ?? <Outlet />
+    )
   })() as JSX.Element
 
   const catchElement =
-    childMatch?.options.catchElement ?? router.options.defaultCatchElement
+    match?.options.catchElement ?? router.options.defaultCatchElement
 
   return (
-    <MatchesProvider value={matches} key={childMatch.matchId}>
+    <MatchesProvider value={matches}>
       <CatchBoundary catchElement={catchElement}>{element}</CatchBoundary>
     </MatchesProvider>
   )
@@ -578,7 +572,7 @@ export function DefaultErrorBoundary({ error }: { error: any }) {
           ) : null}
         </pre>
       </div>
-      <div style={{ height: '1rem' }} />
+      {/* <div style={{ height: '1rem' }} />
       <div
         style={{
           fontSize: '.8em',
@@ -590,7 +584,7 @@ export function DefaultErrorBoundary({ error }: { error: any }) {
         If you are the owner of this website, it's highly recommended that you
         configure your own custom Catch/Error boundaries for the router. You can
         optionally configure a boundary for each route.
-      </div>
+      </div> */}
     </div>
   )
 }
diff --git a/packages/router-core/src/route.ts b/packages/router-core/src/route.ts
index 11f0db74c9..5da2421256 100644
--- a/packages/router-core/src/route.ts
+++ b/packages/router-core/src/route.ts
@@ -13,7 +13,6 @@ import {
   RouteInfo,
   RouteInfoByPath,
 } from './routeInfo'
-import { RouteMatch } from './routeMatch'
 import {
   Action,
   ActionState,
@@ -22,7 +21,7 @@ import {
   MatchRouteOptions,
   Router,
 } from './router'
-import { NoInfer, replaceEqualDeep } from './utils'
+import { NoInfer } from './utils'
 
 export interface AnyRoute extends Route<any, any> {}
 
@@ -96,10 +95,10 @@ export function createRoute<
     router.state.actions[id] ||
     (() => {
       router.state.actions[id] = {
-        pending: [],
+        submissions: [],
         submit: async <T, U>(
           submission: T,
-          actionOpts?: { invalidate?: boolean },
+          actionOpts?: { invalidate?: boolean; multi?: boolean },
         ) => {
           if (!route) {
             return
@@ -107,27 +106,27 @@ export function createRoute<
 
           const invalidate = actionOpts?.invalidate ?? true
 
+          if (!actionOpts?.multi) {
+            action.submissions = action.submissions.filter((d) => d.isMulti)
+          }
+
           const actionState: ActionState<T, U> = {
             submittedAt: Date.now(),
             status: 'pending',
             submission,
+            isMulti: !!actionOpts?.multi,
           }
 
           action.current = actionState
           action.latest = actionState
-          action.pending.push(actionState)
-
-          router.state = {
-            ...router.state,
-            currentAction: actionState,
-            latestAction: actionState,
-          }
+          action.submissions.push(actionState)
 
           router.notify()
 
           try {
             const res = await route.options.action?.(submission)
             actionState.data = res as U
+
             if (invalidate) {
               router.invalidateRoute({ to: '.', fromCurrent: true })
               await router.reload()
@@ -139,8 +138,6 @@ export function createRoute<
             actionState.error = err
             actionState.status = 'error'
           } finally {
-            action.pending = action.pending.filter((d) => d !== actionState)
-            router.removeActionQueue.push({ action, actionState })
             router.notify()
           }
         },
diff --git a/packages/router-core/src/routeMatch.ts b/packages/router-core/src/routeMatch.ts
index 739cc6dab1..4e8b033f22 100644
--- a/packages/router-core/src/routeMatch.ts
+++ b/packages/router-core/src/routeMatch.ts
@@ -1,13 +1,12 @@
 import { GetFrameworkGeneric } from './frameworks'
 import { Route } from './route'
-import { AnyPathParams } from './routeConfig'
 import {
   AnyAllRouteInfo,
   AnyRouteInfo,
   DefaultAllRouteInfo,
   RouteInfo,
 } from './routeInfo'
-import { Router } from './router'
+import { ActionState, Router } from './router'
 import { replaceEqualDeep, Timeout } from './utils'
 
 export interface RouteMatch<
@@ -37,7 +36,7 @@ export interface RouteMatch<
     catchElement?: GetFrameworkGeneric<'Element'> // , TRouteInfo['loaderData']>
     pendingElement?: GetFrameworkGeneric<'Element'> // , TRouteInfo['loaderData']>
     loadPromise?: Promise<void>
-    loaderPromise?: Promise<void>
+    loaderDataPromise?: Promise<void>
     elementsPromise?: Promise<void>
     dataPromise?: Promise<void>
     pendingTimeout?: Timeout
@@ -104,6 +103,7 @@ export function createRouteMatch<
     isFetching: false,
     isInvalid: false,
     invalidAt: Infinity,
+    // pendingActions: [],
     getIsInvalid: () => {
       const now = Date.now()
       return routeMatch.isInvalid || routeMatch.invalidAt < now
@@ -147,18 +147,6 @@ export function createRouteMatch<
         clearTimeout(routeMatch.__.pendingMinTimeout)
         delete routeMatch.__.pendingMinPromise
       },
-      // setParentMatch: (parentMatch?: RouteMatch) => {
-      //   routeMatch.parentMatch = parentMatch
-      // },
-      // addChildMatch: (childMatch: RouteMatch) => {
-      //   if (
-      //     routeMatch.childMatches.find((d) => d.matchId === childMatch.matchId)
-      //   ) {
-      //     return
-      //   }
-
-      //   routeMatch.childMatches.push(childMatch)
-      // },
       validate: () => {
         // Validate the search params and stabilize them
         const parentSearch =
@@ -174,7 +162,7 @@ export function createRouteMatch<
 
           let nextSearch = replaceEqualDeep(
             prevSearch,
-            validator?.(parentSearch),
+            validator?.(parentSearch) ?? {},
           )
 
           // Invalidate route matches when search param stability changes
@@ -188,6 +176,14 @@ export function createRouteMatch<
             ...parentSearch,
             ...nextSearch,
           })
+
+          elementTypes.map(async (type) => {
+            const routeElement = routeMatch.options[type]
+
+            if (typeof routeMatch.__[type] !== 'function') {
+              routeMatch.__[type] = routeElement
+            }
+          })
         } catch (err: any) {
           console.error(err)
           const error = new (Error as any)('Invalid search params found', {
@@ -243,7 +239,7 @@ export function createRouteMatch<
       ) {
         const maxAge = loaderOpts?.preload ? loaderOpts?.maxAge : undefined
 
-        routeMatch.fetch({ maxAge })
+        await routeMatch.fetch({ maxAge })
       }
     },
     fetch: async (opts) => {
@@ -266,7 +262,7 @@ export function createRouteMatch<
         routeMatch.isFetching = true
         routeMatch.__.resolve = resolve as () => void
 
-        const loaderPromise = (async () => {
+        routeMatch.__.loaderDataPromise = (async () => {
           // Load the elements and data in parallel
 
           routeMatch.__.elementsPromise = (async () => {
@@ -277,13 +273,11 @@ export function createRouteMatch<
               elementTypes.map(async (type) => {
                 const routeElement = routeMatch.options[type]
 
-                if (routeMatch.__[type]) {
-                  return
+                if (typeof routeMatch.__[type] === 'function') {
+                  routeMatch.__[type] = await router.options.createElement!(
+                    routeElement,
+                  )
                 }
-
-                routeMatch.__[type] = await router.options.createElement!(
-                  routeElement,
-                )
               }),
             )
           })()
@@ -297,7 +291,7 @@ export function createRouteMatch<
                   signal: routeMatch.__.abortController.signal,
                 })
                 if (id !== routeMatch.__.latestId) {
-                  return routeMatch.__.loaderPromise
+                  return routeMatch.__.loadPromise
                 }
 
                 routeMatch.routeLoaderData = replaceEqualDeep(
@@ -317,7 +311,7 @@ export function createRouteMatch<
                   0)
             } catch (err) {
               if (id !== routeMatch.__.latestId) {
-                return routeMatch.__.loaderPromise
+                return routeMatch.__.loadPromise
               }
 
               if (process.env.NODE_ENV !== 'production') {
@@ -335,7 +329,7 @@ export function createRouteMatch<
               routeMatch.__.dataPromise,
             ])
             if (id !== routeMatch.__.latestId) {
-              return routeMatch.__.loaderPromise
+              return routeMatch.__.loadPromise
             }
 
             if (routeMatch.__.pendingMinPromise) {
@@ -344,7 +338,7 @@ export function createRouteMatch<
             }
           } finally {
             if (id !== routeMatch.__.latestId) {
-              return routeMatch.__.loaderPromise
+              return routeMatch.__.loadPromise
             }
             routeMatch.__.cancelPending()
             routeMatch.isPending = false
@@ -353,16 +347,18 @@ export function createRouteMatch<
           }
         })()
 
-        routeMatch.__.loaderPromise = loaderPromise
-        await loaderPromise
+        await routeMatch.__.loaderDataPromise
 
         if (id !== routeMatch.__.latestId) {
-          return routeMatch.__.loaderPromise
+          return routeMatch.__.loadPromise
         }
-        delete routeMatch.__.loaderPromise
+
+        delete routeMatch.__.loaderDataPromise
       })
 
-      return await routeMatch.__.loadPromise
+      await routeMatch.__.loadPromise
+
+      delete routeMatch.__.loadPromise
     },
   }
 
diff --git a/packages/router-core/src/router.ts b/packages/router-core/src/router.ts
index e5ba5738c8..afd65b73ca 100644
--- a/packages/router-core/src/router.ts
+++ b/packages/router-core/src/router.ts
@@ -114,10 +114,13 @@ export interface Action<
   TResponse = unknown,
   // TError = unknown,
 > {
-  submit: (submission?: TPayload) => Promise<TResponse>
+  submit: (
+    submission?: TPayload,
+    actionOpts?: { invalidate?: boolean; multi?: boolean },
+  ) => Promise<TResponse>
   current?: ActionState<TPayload, TResponse>
   latest?: ActionState<TPayload, TResponse>
-  pending: ActionState<TPayload, TResponse>[]
+  submissions: ActionState<TPayload, TResponse>[]
 }
 
 export interface ActionState<
@@ -128,6 +131,7 @@ export interface ActionState<
   submittedAt: number
   status: 'idle' | 'pending' | 'success' | 'error'
   submission: TPayload
+  isMulti: boolean
   data?: TResponse
   error?: unknown
 }
@@ -173,8 +177,6 @@ export interface RouterState {
   location: Location
   matches: RouteMatch[]
   lastUpdated: number
-  currentAction?: ActionState
-  latestAction?: ActionState
   actions: Record<string, Action>
   loaders: Record<string, Loader>
   pending?: PendingState
@@ -262,10 +264,10 @@ export interface Router<
   routeTree: Route<TAllRouteInfo, RouteInfo>
   routesById: RoutesById<TAllRouteInfo>
   navigationPromise: Promise<void>
-  removeActionQueue: { action: Action; actionState: ActionState }[]
   startedLoadingAt: number
   resolveNavigation: () => void
   subscribe: (listener: Listener) => () => void
+  reset: () => void
   notify: () => void
   mount: () => () => void
   onFocus: () => void
@@ -275,7 +277,7 @@ export interface Router<
 
   buildNext: (opts: BuildNextOptions) => Location
   cancelMatches: () => void
-  loadLocation: (next?: Location) => Promise<void>
+  load: (next?: Location) => Promise<void>
   matchCache: Record<string, MatchCacheEntry>
   cleanMatchCache: () => void
   getRoute: <TId extends keyof TAllRouteInfo['routeInfoById']>(
@@ -345,6 +347,19 @@ const isServer =
 const createDefaultHistory = () =>
   isServer ? createMemoryHistory() : createBrowserHistory()
 
+function getInitialRouterState(): RouterState {
+  return {
+    status: 'idle',
+    location: null!,
+    matches: [],
+    actions: {},
+    loaders: {},
+    lastUpdated: Date.now(),
+    isFetching: false,
+    isPreloading: false,
+  }
+}
+
 export function createRouter<
   TRouteConfig extends AnyRouteConfig = RouteConfig,
   TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
@@ -367,7 +382,6 @@ export function createRouter<
     history,
     options: originalOptions,
     listeners: [],
-    removeActionQueue: [],
     // Resolved after construction
     basepath: '',
     routeTree: undefined!,
@@ -378,15 +392,10 @@ export function createRouter<
     navigationPromise: Promise.resolve(),
     resolveNavigation: () => {},
     matchCache: {},
-    state: {
-      status: 'idle',
-      location: null!,
-      matches: [],
-      actions: {},
-      loaders: {},
-      lastUpdated: Date.now(),
-      isFetching: false,
-      isPreloading: false,
+    state: getInitialRouterState(),
+    reset: () => {
+      router.state = getInitialRouterState()
+      router.notify()
     },
     startedLoadingAt: Date.now(),
     subscribe: (listener: Listener): (() => void) => {
@@ -437,20 +446,21 @@ export function createRouter<
         strictParseParams: true,
       })
 
+      matches.forEach((match, index) => {
+        const dehydratedMatch = dehydratedState.matches[index]
+        invariant(
+          dehydratedMatch,
+          'Oh no! Dehydrated route matches did not match the active state of the router 😬',
+        )
+        Object.assign(match, dehydratedMatch)
+      })
+
+      router.loadMatches(matches)
+
       router.state = {
         ...router.state,
         ...dehydratedState,
-        matches: matches.map((match) => {
-          const dehydratedMatch = dehydratedState.matches.find(
-            (d: any) => d.matchId === match.matchId,
-          )
-          invariant(
-            dehydratedMatch,
-            'Oh no! Dehydrated route matches did not match the active state of the router 😬',
-          )
-          Object.assign(match, dehydratedMatch)
-          return match
-        }),
+        matches,
       }
     },
 
@@ -467,13 +477,10 @@ export function createRouter<
         router.__.commitLocation(next, true)
       }
 
-      router.loadLocation()
+      // router.load()
 
       const unsub = router.history.listen((event) => {
-        console.log(event.location)
-        router.loadLocation(
-          router.__.parseLocation(event.location, router.location),
-        )
+        router.load(router.__.parseLocation(event.location, router.location))
       })
 
       // addEventListener does not exist in React Native, but window does
@@ -486,14 +493,16 @@ export function createRouter<
 
       return () => {
         unsub()
-        // Be sure to unsubscribe if a new handler is set
-        window.removeEventListener('visibilitychange', router.onFocus)
-        window.removeEventListener('focus', router.onFocus)
+        if (!isServer && window.removeEventListener) {
+          // Be sure to unsubscribe if a new handler is set
+          window.removeEventListener('visibilitychange', router.onFocus)
+          window.removeEventListener('focus', router.onFocus)
+        }
       }
     },
 
     onFocus: () => {
-      router.loadLocation()
+      router.load()
     },
 
     update: (opts) => {
@@ -529,7 +538,7 @@ export function createRouter<
       })
     },
 
-    loadLocation: async (next?: Location) => {
+    load: async (next?: Location) => {
       const id = Math.random()
       router.startedLoadingAt = id
 
@@ -538,17 +547,6 @@ export function createRouter<
         router.location = next
       }
 
-      // Clear out old actions
-      router.removeActionQueue.forEach(({ action, actionState }) => {
-        if (router.state.currentAction === actionState) {
-          router.state.currentAction = undefined
-        }
-        if (action.current === actionState) {
-          action.current = undefined
-        }
-      })
-      router.removeActionQueue = []
-
       // Cancel any pending matches
       router.cancelMatches()
 
@@ -598,6 +596,13 @@ export function createRouter<
           params: d.params,
           search: d.routeSearch,
         })
+
+        // // Clear actions
+        // if (d.action) {
+        //   d.action.current = undefined
+        //   d.action.submissions = []
+        // }
+
         // Clear idle error states when match leaves
         if (d.status === 'error' && !d.isFetching) {
           d.status = 'idle'
@@ -634,17 +639,21 @@ export function createRouter<
         delete router.matchCache[d.matchId]
       })
 
-      if (matches.some((d) => d.status === 'loading')) {
-        router.notify()
-        await Promise.all(
-          matches.map((d) => d.__.loaderPromise || Promise.resolve()),
-        )
-      }
+      // router.notify()
+
       if (router.startedLoadingAt !== id) {
         // Ignore side-effects of match loading
         return
       }
 
+      matches.forEach((match) => {
+        // Clear actions
+        if (match.action) {
+          match.action.current = undefined
+          match.action.submissions = []
+        }
+      })
+
       router.state = {
         ...router.state,
         location: router.location,
@@ -823,7 +832,9 @@ export function createRouter<
         if (match.status === 'loading') {
           // If requested, start the pending timers
           if (loaderOpts?.withPending) match.__.startPending()
+        }
 
+        if (match.__.loadPromise) {
           // Wait for the first sign of activity from the match
           // This might be completion, error, or a pending state
           await match.__.loadPromise