构建时在Markdown中嵌入React组件渲染及Preact/React路由组件问题

我猜你应该是碰到了Markdown里的<Link>标签没被正确解析成React Router可点击路由链接的问题？别慌，这是preact-markup的常见配置问题，下面一步步帮你搞定：

1. 给preact-markup显式映射自定义组件 #

preact-markup不会自动识别你导入的React组件，必须通过components属性把Markdown里的标签和实际组件绑定起来。你的组件代码得改成这样：

import { Link } from 'react-router-dom';
import text from './text.md';
import Markup from 'preact-markup';

export default class Comp extends React.Component {
  render() {
    return (
      <Markup
        markup={text}
        // 关键：把<Link>标签映射到react-router的Link组件
        components={{ Link }}
        // 一定要开启Markdown解析模式，不然只会解析HTML
        type="markdown"
      />
    );
  }
}

2. 检查Markdown文件和导入方式 #

• 确保你的Markdown文件里的<Link>标签是原始HTML格式，没有被转义：

  Heading

  return (<Link to="/test">Let's go here</Link>)
  

  #

• 导入.md文件时，要用raw-loader这类能直接读取原始文本的loader，别用会转义HTML的markdown-loader。如果用webpack，在配置里加个规则：

  module.exports = {
    module: {
      rules: [
        { test: /\.md$/, use: 'raw-loader' }
      ]
    }
  };
  

3. Preact环境的特殊注意事项 #

如果你用的是Preact而不是React，注意路由组件的导入：

• 要么用Preact官方的路由组件：

  import { Link } from 'preact-router';
  

• 要么用preact/compat兼容React Router的组件：

  import { Link } from 'preact/compat/react-router-dom';
  

4. 排查小技巧 #

如果还是没生效，先console.log(text)看看导入的内容是不是原始的带<Link>标签的文本——要是看到<Link...>这种转义后的实体，那肯定是loader的问题，赶紧调整导入配置就好。

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