Middleware for SPAs: How React Router v7 Solves It? #10476

v-hung · 2025-02-11T16:45:59Z

v-hung
Feb 11, 2025

🚀 Issue: React Router v7 - `clientLoader()` Runs Before `loadUser()`

❓ Problem

I recently migrated my project to React Router v7 following the official upgrade guide:
🔗 React Router v7 Upgrade Guide.

Here are my main components:

`root.tsx`

import { Links, Meta, Scripts, ScrollRestoration } from "react-router";
import App from "./App";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" type="image/x-icon" href="logo.svg"></link>
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function Root() {
  return <App />;
}

`app.tsx`

const postResource = createSuspender<void>(loadUser());

const AppProvider = () => {
  postResource.read();
  return <Outlet />;
};

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AppProvider />
    </Suspense>
  );
};

export default App;

`home.tsx`

export async function clientLoader() {
  requiredPermission();
  return {
    title: "Home page",
  };
}

export default function Component({ loaderData }: Route.ComponentProps) {
  return <div>{loaderData.title}</div>;
}

🔍 Expected Behavior

loadUser() should run first via Suspense in App.tsx.
clientLoader() in home.tsx should wait for loadUser() to complete before checking permissions.

🛑 Actual Behavior

clientLoader() runs before loadUser() finishes.
Even when trying to include loadUser() in clientLoader, it does not wait for the layout’s clientLoader.

❓ Question

How can I ensure that loadUser() runs first before executing clientLoader()?
Would love any suggestions or best practices on handling this issue in React Router v7. 🚀

Tags: React Router, Suspense, Middleware, Authentication, React

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Middleware for SPAs: How React Router v7 Solves It? #10476

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Middleware for SPAs: How React Router v7 Solves It? #10476

Uh oh!

v-hung Feb 11, 2025

🚀 Issue: React Router v7 - clientLoader() Runs Before loadUser()

❓ Problem

root.tsx

app.tsx

home.tsx

🔍 Expected Behavior

🛑 Actual Behavior

❓ Question

Replies: 0 comments

v-hung
Feb 11, 2025

🚀 Issue: React Router v7 - `clientLoader()` Runs Before `loadUser()`

`root.tsx`

`app.tsx`

`home.tsx`