react-router-mdx

Generouted + React Router + MDX Example

What's different from the default setup of react-router example

• @mdx-js/rollup installation and config at vite.config.ts to use .mdx files at src/pages:

// vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import generouted from '@generouted/react-router/plugin'
import mdx from '@mdx-js/rollup'

export default defineConfig({ plugins: [{ enforce: 'pre', ...mdx() }, react(), generouted()] })

Adding pages

Add the home page by creating a new file src/pages/index.mdx → /:

### Header

**Bold**, _italic_ and `inline-code`

Preview

Run this example online via StackBlitz: