如何在Docusaurus的<a>标签href属性中使用环境变量？

你的问题出在不能将React组件<EnvValue>直接作为字符串嵌入HTML的href属性里——浏览器会把它当成纯文本解析，所以才会出现编码后的标签内容。下面是两种正确的实现方式：

方法1：用自定义React组件拼接链接 #

如果你需要在多个地方复用这个链接，推荐写一个自定义组件：

1. 创建src/components/RegisterLink.js：

import React from 'react';
import { useDocusaurusContext } from '@docusaurus/core';

export default function RegisterLink() {
  // 从站点配置中获取环境变量（需先在docusaurus.config.js中配置）
  const { siteConfig } = useDocusaurusContext();
  const dashboardURL = siteConfig.customFields.dashboardURL;
  
  // 兜底处理：如果环境变量未设置，使用默认地址
  const registerUrl = `${dashboardURL || 'https://default-dashboard.com'}/register`;

  return <a href={registerUrl}>Register</a>;
}

2. 在MDX或页面中引入组件：

import RegisterLink from '../components/RegisterLink';

<RegisterLink />

方法2：在MDX中直接使用JSX表达式 #

如果只是单次使用，直接在MDX里写JSX即可：

方式A：从站点配置读取 #

先在docusaurus.config.js中配置自定义字段：

module.exports = {
  // ...其他配置项
  customFields: {
    // 从系统环境变量读取，或设置默认值
    dashboardURL: process.env.DASHBOARD_URL || 'https://default-dashboard.com',
  },
};

然后在MDX文件中：

import { useDocusaurusContext } from '@docusaurus/core';

const { siteConfig } = useDocusaurusContext();
const registerUrl = `${siteConfig.customFields.dashboardURL}/register`;

<a href={registerUrl}>Register</a>

方式B：直接读取process.env变量 #

如果你的环境变量是通过.env文件注入的（变量名需以REACT_APP_开头，Docusaurus会自动识别）：

1. 在项目根目录创建.env文件：

REACT_APP_DASHBOARD_URL=https://your-dashboard-domain.com

2. 在MDX中直接使用：

<a href={`${process.env.REACT_APP_DASHBOARD_URL || 'https://default-dashboard.com'}/register`}>Register</a>

关键注意事项 #

• 所有动态值必须用JSX大括号{}包裹，不能直接把组件或变量拼在字符串属性里
• 务必添加默认值，避免环境变量未配置时出现undefined/register的无效链接
• 构建项目时，确保环境变量已正确注入（比如CI/CD中设置对应的环境变量）

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