React中导入作品集项目及通过localhost:3000访问非React项目的方法

1. 如何在React中导入作品集项目？ #

导入作品集项目到React环境，需要根据项目的类型（静态/带后端）来选择不同的方式：

静态作品集项目（纯HTML/CSS/JS，无后端语言依赖） #

• 直接放置到public目录：把整个静态项目文件夹复制到React项目的public文件夹下（比如public/portfolio-projects/my-static-project）。之后你可以用原生的<a>标签直接跳转访问：

  <a 
    href="/portfolio-projects/my-static-project/index.html" 
    target="_blank" 
    rel="noopener noreferrer"
  >
    查看我的静态项目
  </a>
  

  React的开发服务器会自动把public目录作为静态资源根目录，所以这些文件可以直接被访问到。

• 嵌入到React组件（用iframe）：如果不想跳转到新页面，而是在React页面内展示静态项目，可以用iframe加载：

  <iframe 
    src="/portfolio-projects/my-static-project/index.html" 
    title="我的静态项目展示" 
    width="100%" 
    height="700px"
    style={{ border: 'none' }}
  />
  

带后端的作品集项目（比如你的PHP项目） #

React的开发服务器（webpack-dev-server）本身不支持解析PHP这类后端语言，所以需要单独启动后端服务器来处理这类项目：

• 直接跳转外部后端地址：把PHP项目放到XAMPP的htdocs目录，启动Apache服务器后，用<a>标签直接指向后端的访问地址（比如http://localhost/my-php-project/index.php）。
• 配置代理转发：如果想让React的localhost:3000能无缝转发请求到后端服务器，可以在React项目的package.json中添加代理配置：

  "proxy": "http://localhost:80"
  

  配置完成后，你就可以用<a href="/my-php-project/index.php">来跳转，React开发服务器会自动把这个请求转发到后端服务器的对应路径。

2. 访问React项目内includes文件夹中的非React PHP项目 #

你遇到的核心问题是：React Router的Link组件只能处理SPA内部的路由跳转，无法直接访问静态文件或后端项目。下面是具体的解决方案：

方案一：将PHP项目迁移到public目录（仅适用于静态资源，无法运行PHP） #

如果只是想展示项目的静态文件（不运行PHP代码），可以把myproject1文件夹复制到React的public目录下，然后用<a>标签跳转：

<a 
  href="/myproject1/index.php" 
  target="_blank" 
  rel="noopener noreferrer"
>
  查看项目文件
</a>

⚠️ 注意：这种方式下PHP代码不会被执行，因为React开发服务器不解析PHP。

方案二：单独启动后端服务器，用外部链接跳转 #

这是最可靠的方式，因为后端项目和React项目分开运行，各自处理自己的职责：

1. 把myproject1放到XAMPP的htdocs目录下，启动Apache服务器。
2. 在React组件中使用原生<a>标签跳转：

   <a 
     href="http://localhost/myproject1/index.php" 
     target="_blank" 
     rel="noopener noreferrer"
   >
     运行并查看我的PHP项目
   </a>
   

方案三：配置React开发服务器代理（实现同域名访问后端） #

如果你希望避免跨域跳转的感知，可以配置代理让React服务器转发请求到后端：

1. 在React项目的package.json中添加代理配置：

   "proxy": "http://localhost:80"
   

2. 确保你的PHP项目在XAMPP的htdocs目录下，路径为htdocs/myproject1。
3. 之后在React中用<a>标签跳转：

   <a href="/myproject1/index.php">查看PHP项目</a>
   

   此时React开发服务器会把/myproject1/index.php的请求转发到http://localhost:80/myproject1/index.php，从而正常运行PHP代码。

关键提醒 #

不要尝试用React Router的Link组件访问非React路由！Link是专为客户端SPA路由设计的，它只会在React应用内部切换组件，不会发起新的HTTP请求，所以无法用来访问后端项目或静态文件，必须使用原生的<a>标签。

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