React页面未渲染：src目录外Hero组件导入路径解析失败求助

1. 修正相对路径 #

你的目录结构里，AdminHome.jsx在src/page/admin，components文件夹和src同级（位于项目根目录）。当前../components/Hero的路径只会跳转到src/page目录下查找components，显然不对。正确的相对路径需要往上跳转3级到项目根目录，再进入components：

import Hero from '../../../components/Hero'

如果Hero组件是components/Hero/index.jsx这种目录式结构，路径保持../../../components/Hero即可（前提是index.jsx为默认导出）。

2. 处理构建工具的目录限制 #

多数前端框架（如Vite、Create React App）默认只允许解析src目录内的文件，即便路径正确，也可能因安全限制无法访问src外的文件，需要调整构建工具配置：

针对Vite项目 #

在vite.config.js中添加配置，允许访问上级目录并设置别名：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    fs: {
      allow: ['..'] // 允许访问项目根目录及上级目录
    }
  },
  resolve: {
    alias: {
      '@components': '/components' // 用别名直接指向根目录下的components
    }
  }
})

之后可以用别名简洁导入：

import Hero from '@components/Hero'

针对Create React App项目 #

CRA默认不允许直接修改webpack配置，需借助craco工具：

1. 安装依赖：npm install @craco/craco --save-dev
2. 在项目根目录创建craco.config.js：

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@components': path.resolve(__dirname, 'components')
    }
  }
};

3. 修改package.json中的启动命令，替换react-scripts为craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

完成后同样可用别名导入组件。

3. 检查组件导出与文件名 #

• 确认Hero组件使用默认导出：export default Hero，如果是命名导出，需改为import { Hero } from '...'
• 核对文件名，部分构建工具需要显式写扩展名（如Hero.jsx），或可在配置中设置自动识别.jsx

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