React + Vite 如何根据路由参数动态导入并渲染Markdown文件？

问题场景 #

在 React + Vite 项目中，需要根据路由参数blogId动态渲染对应 Markdown 文件。当前静态导入方式可正常渲染，但尝试通过路由参数拼接路径、用React.lazy懒加载时，无法正常获取组件，打印结果为 React 懒加载的包装对象，无法渲染。

原静态导入代码：

// 其他导入...
import { useParams } from 'react-router-dom';
import { ReactComponent } from '../content/blog1.md';

const BlogPost = () => {
  const params = useParams();
  return (
    <Base>
      <PageTitle title={`title of blog ${params.blogId}`} />
      <ReactComponent />
    </Base>
  );
};
export default BlogPost;

尝试的报错动态导入代码：

const path = `../content/blog${params.blogId}.md`;
const Markdown = React.lazy(() => import(path));

可行解决方案 #

方案1：用 Vite import.meta.glob 批量预加载（适合博客数量少的场景） #

Vite 支持通过import.meta.glob批量匹配文件，提前导入所有目标 Markdown 文件，再根据路由参数动态选择组件：

// 其他导入...
import { useParams } from 'react-router-dom';

// 批量导入content目录下所有blog开头的md文件，指定导出ReactComponent
const markdownComponents = import.meta.glob('../content/blog*.md', { 
  eager: true, 
  import: 'ReactComponent' 
});

const BlogPost = () => {
  const { blogId } = useParams();
  // 拼接对应文件的路径键名
  const componentKey = `../content/blog${blogId}.md`;
  const MarkdownComponent = markdownComponents[componentKey];

  // 处理文件不存在的情况
  if (!MarkdownComponent) {
    return (
      <Base>
        <PageTitle title="博客不存在" />
        <div>该博客文章未找到</div>
      </Base>
    );
  }

  return (
    <Base>
      <PageTitle title={`title of blog ${blogId}`} />
      <MarkdownComponent />
    </Base>
  );
};
export default BlogPost;

eager: true表示构建时提前加载所有匹配文件，无需额外处理加载状态。

方案2：懒加载版本（适合大量博客文件） #

如果不想预加载所有文件，可结合import.meta.glob实现按需懒加载，配合Suspense处理加载状态：

// 其他导入...
import { useParams, Suspense } from 'react-router-dom';

// 懒加载所有blog开头的md文件
const markdownComponents = import.meta.glob('../content/blog*.md', { 
  import: 'ReactComponent' 
});

const BlogPost = () => {
  const { blogId } = useParams();
  const componentKey = `../content/blog${blogId}.md`;
  const MarkdownComponent = markdownComponents[componentKey];

  if (!MarkdownComponent) {
    return (
      <Base>
        <PageTitle title="博客不存在" />
        <div>该博客文章未找到</div>
      </Base>
    );
  }

  return (
    <Base>
      <PageTitle title={`title of blog ${blogId}`} />
      <Suspense fallback={<div>加载中...</div>}>
        <MarkdownComponent />
      </Suspense>
    </Base>
  );
};
export default BlogPost;

此时markdownComponents的每个值都是返回组件的 Promise，必须用Suspense包裹处理加载过程。

方案3：手动加载 Markdown 文本并渲染（不依赖 ReactComponent 导出） #

若未配置 Markdown 转 React 组件的插件，可直接加载 Markdown 文本，用第三方库react-markdown渲染：

1. 先安装依赖：

npm install react-markdown

2. 代码实现：

// 其他导入...
import { useParams, useState, useEffect } from 'react-router-dom';
import ReactMarkdown from 'react-markdown';

const BlogPost = () => {
  const { blogId } = useParams();
  const [content, setContent] = useState('');
  const [loading, setLoading] = useState(true);
  const [isError, setIsError] = useState(false);

  useEffect(() => {
    const loadMarkdown = async () => {
      try {
        // 通过fetch加载静态资源，需确保Markdown文件在Vite可访问的目录（如public/content）
        const res = await fetch(`/content/blog${blogId}.md`);
        if (!res.ok) throw new Error();
        const mdText = await res.text();
        setContent(mdText);
      } catch {
        setIsError(true);
      } finally {
        setLoading(false);
      }
    };
    loadMarkdown();
  }, [blogId]);

  if (loading) return <Base><div>加载中...</div></Base>;
  if (isError) return <Base><PageTitle title="博客不存在" /><div>该博客文章未找到</div></Base>;

  return (
    <Base>
      <PageTitle title={`title of blog ${blogId}`} />
      <ReactMarkdown>{content}</ReactMarkdown>
    </Base>
  );
};
export default BlogPost;

原方案失败原因 #

Vite 构建时需要静态分析导入路径，完全动态拼接的路径（如../content/blog${params.blogId}.md）无法被构建工具解析，导致无法打包对应文件。而import.meta.glob是 Vite 提供的语法，能提前匹配所有可能的文件，从而支持动态选择。

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