How to implement conditional routes and based-on-config route pathname with file-based routing?

[xsjcTony]

Conditional Route:

Background:
I have a flag that will be injected as a boolean value when running CI/CD build process, let's call it routeFlag.
I also have a route that needs to be rendered conditionally based on this flag, if it's false then return 404. Let's call it /conditional-route.

---

Previously with react-router-dom:

const router = createBrowserRouter([
  {
    path: '',
    errorElement: <RouterErrorBoundary />,
    element: (
      <>
        {/* Other global components */}
        <Outlet />
      </>
    ),
    children: [
      // 404
      {
        path: '*',
        element: <Error404 />,
      },
      {
        path: '/',
        element: <Landing />,
      },
      // --------------------------- HERE -------------------------------
      // the conditional route
      ...routeFlag
        ? [{
          path: '/coinditional-route'',
          element: <MyConditionalPage />,
        }]
        : [],
    ],
  },
]);

---

But now I'm switching to TanStack Router, and I'm using file-based routing as suggested.
Is there an official way to implement it without switching back to code-based routing? (which I really don't want)

Based-on-config Route Pathname

Backgound:
Mostly the same as above, where this time a have a string variable will be injected, let's call it pathnameBasedOnConfig.
It can be anything, since the same codebase is built into different versions with the config file.

---

Previously with react-router-dom:

{
  path: pathnameBasedOnConfig,
  element: <Whatever />,
}

---

The same question, is there a recommended way to do it with file-based routing?

Thanks!

[xsjcTony]

Based-on-config Route Pathname

Regarding that, I have an implementation which looks like this:
But it just seems so weird. It looks like I'm managing a code-based routing myself on top of file-based routing in a poor way😂

Can anyone please provide some suggestions or is this just the right way to do this?

// `/routes/$.tsx

import type { FC, JSX } from 'react';
import { createFileRoute } from '@tanstack/react-router';
import { basedOnConfigPath } from '@config/config.json';
import Error404 from '@pages/Error/Error404';
import Foo from '@pages/Foo';
import Bar from '@pages/Foo/Bar';


const PATH_COMPONENT_MAP = new Map<string, JSX.Element>([
  [basedOnConfigPath, <Foo />],
  [`${basedOnConfigPath}/bar`, <Bar />],
]);


const CatchAllRoute: FC = () => {
  const { _splat } = Route.useParams();

  if (!_splat)
    return <Error404 />;

  const component = PATH_COMPONENT_MAP.get(`/${_splat}`);

  return component ?? <Error404 />;
};


export const Route = createFileRoute('/$')({
  component: CatchAllRoute,
});

[xsjcTony]

Conditional Route

I have an implementation that seems working, but I don't know how it's going to impact code splitting.
Also, I will have to write this kind of ternary expression in every conditional route instead of grouping them together in code-based routing.

Please let me know if there's any better way to do so or any suggestions 🙏

import { createFileRoute } from '@tanstack/react-router';
import { calculator } from '@config/config.json'; // This will be injected during build time via pipeline, but also available in dev mode
import Error404 from '@pages/Error/Error404';
import Calculator from '@pages/Calculator';


const { calculator: calculatorEnabled } = calculator;

const CalculatorPage = calculatorEnabled ? Calculator : Error404;

export const Route = createFileRoute('/calculators')({
  component: CalculatorPage,
});

(Be careful with the ternary expression, see #3353)

[hihhhello]

I have the same question but for having public/protected routes at the same time. I think the best solution is to switch to code-based routing since eventually, you will have to manually tweak things.