v7: can I conditionally render the route's component?

[jamesarosen]

I have a root route with the stock ErrorBoundary from the guides.

I have a fallback route:

// app/routes.ts
export default [
  // ...
  route('*', 'routes/fallback.tsx')
] satisfies RouteConfig

I want to use my fallback route to proxy an upstream HTTP server. That's relatively straightforward:

// app/routes/fallback.tsx
export default loader({ request }: Route.LoaderArgs) {
  const url = new URL(request.url)
  url.host = 'https://upstream.example.com'
  // do some other adjustments for X-Forwarded-For, keep-alive, etc.
  return await fetch(url, request)
}

But this means that I'm displaying the upstream server's 404 page instead of my app's.

I tried throwing error responses:

export default loader({ request }: Route.LoaderArgs) {
  // ...
  const response = await fetch(url, request)
  if (response.status > 399) throw response
  return response
}

But that made no difference.

If I add a default export component, then 404s render it in my app's layout.

export default function NotFound() {
  return <>Not Found</>
}

But now every request that goes to my FallbackRoute renders that Not Found component.

Is there any way for my loader to say this is a response you should return directly, but this is data to be passed to the component to be rendered in the app?

[jamesarosen]

I also tried using a middleware, but I'm left with the same problem. If I define a default component export, I get that for all requests, even requests where the middleware returns a Response without calling next(). If I don't define a default component export, I get the upstream 404 page instead of my ErrorBoundary.

[jamesarosen]

I think the best approach is to use the entry.server.ts escape-hatch. I check the upstream. If the response isn't a 404, I return it. If it is, I pass through to the react-router application.

// app/entry.server.tsx
export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  routerContext: EntryContext,
  _loadContext: AppLoadContext,
  // If you have middleware enabled:
  // loadContext: unstable_RouterContextProvider
) {
  const upstreamResponse = await proxyRequest(request)
  if (upstreamResponse && upstreamResponse.status !== 404) {
    return upstreamResponse)
  }

  return new Promise((resolve, reject) => {
    // default handleRequest logic
  }
}

That almost works. In dev mode, every proxied request results in the following log:

Error: No route matches URL "/proxy-this-to-upstream"
    at getInternalRouterError (file:///path/to/project/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-router/dist/development/chunk-QMGIS6GS.mjs:4514:5)
    at Object.query (file:///path/to/project/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-router/dist/development/chunk-QMGIS6GS.mjs:2728:19)
    at handleDocumentRequest (file:///path/to/project/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-router/dist/development/chunk-QMGIS6GS.mjs:11037:40)
    at requestHandler (file:///path/to/project/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-router/dist/development/chunk-QMGIS6GS.mjs:10952:24)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at nodeHandler (/Users/jamesrosen/Code/be/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]_react@1_e2zg5feuobthy5rfhnuhmrtquy/node_modules/@react-router/dev/dist/vite.js:3335:30)
    at /Users/jamesrosen/Code/be/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]_react@1_e2zg5feuobthy5rfhnuhmrtquy/node_modules/@react-router/dev/dist/vite.js:3341:17

In production, it's similar:

$ pnpm build
$ pnpm start

Error: No route matches URL "/proxy-this-to-upstream"
    at getInternalRouterError (file:///path/to/project/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-router/dist/development/chunk-QMGIS6GS.mjs:4514:5)
    at Object.query (file:///path/to/project/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-router/dist/development/chunk-QMGIS6GS.mjs:2728:19)
    at handleDocumentRequest (file:///path/to/project/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-router/dist/development/chunk-QMGIS6GS.mjs:11037:40)
    at requestHandler (file:///path/to/project/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-router/dist/development/chunk-QMGIS6GS.mjs:10952:24)
    at file:///path/to/project/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]___ej4ke3uifkh55ihdfs5u7wcahu/node_modules/@react-router/express/dist/index.mjs:28:28
entry.server GET /_next/static/webpack/8494e3b4d78c7f4f.webpack.hot-update.json
GET /proxy-this-to-upstream 200 - - 303.902 ms

The requests do go to my entry.server.tsx and do get proxied. Additional debugging shows that this error is being logged before my handleRequest is called.

If I add a fallback route, the log lines go away:

// app/routes.ts
route('*', 'routes/fallback.tsx')

// app/routes/fallback.tsx
function notFound() {
  throw new Response('Not Found', {
    status: 404,
    statusText: 'Not Found',
  });
}
export const action = notFound;
export const loader = notFound;
export default function Fallback() {
  return <>Not Found</>;
}