如何在ReactJS中创建指向Django admin站点的动态链接？

下面是几种实用的动态链接实现方案，能避免硬写死域名的问题：

• 使用React环境变量配置
  在项目根目录创建.env文件（生产环境用.env.production），添加基础域名配置：

  REACT_APP_DJANGO_ADMIN_BASE_URL=http://127.0.0.1
  

  在React组件中直接读取环境变量拼接完整链接：

  const AdminLink = () => {
    const adminUrl = `${process.env.REACT_APP_DJANGO_ADMIN_BASE_URL}/admin`;
    return <a href={adminUrl} target="_blank" rel="noopener noreferrer">跳转到Django Admin</a>;
  };
  export default AdminLink;
  

  后续域名变更时，只需要修改.env文件里的配置即可，无需改动代码。注意React环境变量必须以REACT_APP_开头，打包时会自动注入到项目中。

• 从Django后端动态获取域名
  让Django提供一个接口返回当前站点的基础域名，React通过请求接口拿到后拼接Admin路径：
  先在Django中编写接口：

  # Django views.py
  from django.http import JsonResponse
  from django.contrib.sites.models import Site
  
  def get_site_domain(request):
      site = Site.objects.get_current()
      return JsonResponse({'domain': f'http://{site.domain}'})
  

  然后在React组件中请求接口并生成链接：

  import { useState, useEffect } from 'react';
  
  const AdminLink = () => {
    const [adminUrl, setAdminUrl] = useState('');
  
    useEffect(() => {
      fetch('/api/site-domain')
        .then(res => res.json())
        .then(data => setAdminUrl(`${data.domain}/admin`))
        .catch(err => console.error('获取域名失败:', err));
    }, []);
  
    if (!adminUrl) return null;
    return <a href={adminUrl} target="_blank" rel="noopener noreferrer">跳转到Django Admin</a>;
  };
  
  export default AdminLink;
  

  这种方式完全依赖后端的站点配置，后续域名变更只需在Django的Site模型中修改，前端无需调整，适合前后端协同部署的场景。

• 使用相对路径（同域名部署场景）
  如果React和Django Admin部署在同一个域名下（比如生产环境中均为yourdomain.com，React在根路径，Admin在/admin），直接使用相对路径即可：

  const AdminLink = () => {
    return <a href="/admin" target="_blank" rel="noopener noreferrer">跳转到Django Admin</a>;
  };
  export default AdminLink;
  

  这种方案最简单，无需额外配置，后续域名变更完全不影响前端代码。

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