MDX Routes

[R-Bower]

I'm coming from Remix/React Router, which allows you to create MDX routes via the https://mdxjs.com/packages/rollup/ package. I was hoping to do the same here, but this doesn't seem to work as expected with the default file-based routing.

I have not tried the virtual routes approach, which might work. Although this would not be optimal DX as users would have to define these routes manually. Is it possible to make this process automatic for MDX routes?

[schiller-manuel]

how do you envision MDX routes to work with

• path params
• search params
• loaders

etc

all the features a "normal" route has?

[R-Bower]

Similarly to how it's done here.

You can export constants from mdx files.

---
meta:
  - title: My First Post
  - name: description
    content: Isn't this awesome?

headers:
  Cache-Control: no-cache

handle:
  someData: abc
---

import styles from "./first-post.css";

export const links = () => [
  { rel: "stylesheet", href: styles },
];

import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

export const loader = async () => {
  return json({ mamboNumber: 5 });
};

export function ComponentUsingData() {
  const { mamboNumber } = useLoaderData<typeof loader>();
  return <div id="loader">Mambo Number: {mamboNumber}</div>;
}

# This is some markdown!

<ComponentUsingData />

[schiller-manuel]

and how would it look like for tanstack router?

[R-Bower]

I would assume like this:

---
meta:
  - title: My First Post
  - name: description
    content: Isn't this awesome?

headers:
  Cache-Control: no-cache

handle:
  someData: abc
---

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ params }) => {
    return fetchPost(params.postId)
  },
})

What I am wondering is whether this can work for tanstack router. I'm not familiar enough with the internals to determine this.