React中如何根据路由参数动态导入对应MDX组件？

快速实现：动态import懒加载 #

直接使用React的lazy方法配合打包工具原生支持的动态import语法即可实现，注意动态导入必须保留静态路径前缀，让打包工具在构建阶段可以扫描到所有可能被引入的MDX文件，不能传入完全动态的路径字符串。
核心实现代码：

import { useParams } from 'react-router-dom';
import { lazy, Suspense } from 'react';

// 兜底404组件，也可以直接导入写好的MDX提示页
const NotFound = () => <div>抱歉，你访问的文章不存在</div>;

const Article = () => {
  const params = useParams()
  const dashedTitle = params.title.replace(/ /g, '-')
  
  // 动态加载对应MDX，路径前缀../markdowns/和后缀.mdx必须写死为静态字符串
  const MyMDX = lazy(() => 
    import(`../markdowns/${dashedTitle}.mdx`)
      .catch(() => ({ default: NotFound })) // 捕获导入失败的场景，渲染兜底内容
  )

  return (
    <article>
      <Suspense fallback={<div>文章加载中...</div>}>
        <MyMDX />
      </Suspense>
    </article>
  );
}

推荐方案：预扫描生成MDX映射表 #

上面的快速实现虽然写法简单，但存在路径匹配不稳定、不方便扩展文章列表/分类功能的问题，生产环境更推荐用打包工具提供的文件扫描能力，在构建阶段提前拉取所有MDX文件生成映射表：

Vite环境实现（基于import.meta.glob） #

import { useParams } from 'react-router-dom';
import { Suspense } from 'react';

// 构建阶段扫描markdowns目录下所有mdx文件
const mdxModules = import.meta.glob('../markdowns/*.mdx', {
  import: 'default', // 直接取MDX默认导出的组件
  eager: false // 设为true则打包时全量引入所有文章，false则按需懒加载，文章数量多建议设为false
})

// 生成「文件名-组件」映射表
const mdxMap = Object.fromEntries(
  Object.entries(mdxModules).map(([path, component]) => {
    const fileName = path.split('/').pop().replace('.mdx', '')
    return [fileName, component]
  })
)

const NotFound = () => <div>抱歉，你访问的文章不存在</div>;

const Article = () => {
  const params = useParams()
  const dashedTitle = params.title.replace(/ /g, '-')
  const MyMDX = mdxMap[dashedTitle] || NotFound

  return (
    <article>
      <Suspense fallback={<div>文章加载中...</div>}>
        <MyMDX />
      </Suspense>
    </article>
  );
}

Webpack环境可以用require.context实现相同的扫描逻辑，核心思路一致。 #

方案优势 #

• 不会出现动态导入路径解析失败、上线后文件404的问题，稳定性更高
• 可以直接读取所有MDX文件的frontmatter信息（标题、创建时间、标签、摘要等），无需额外开发即可扩展文章列表、分类归档、内容搜索等功能
• 可以灵活控制MDX文件的加载策略，适配不同量级的文章场景

注意事项 #

• 禁止使用完全动态的导入路径（比如import(${dashedTitle}.mdx)），打包工具静态分析时无法识别需要打包的文件，上线后必然出现模块找不到的错误
• 懒加载的MDX组件必须包裹在Suspense组件内，配置加载阶段的兜底UI
• 如果使用Next.js、Remix这类全栈元框架，直接使用框架内置的MDX路由能力即可，无需手动实现动态导入逻辑
• 给MDX传自定义组件、主题配置等props的方式和静态导入完全一致，直接在<MyMDX />上挂载即可

内容的提问来源于stack exchange，提问作者OldDew