React代码执行报错：未找到default导出，仅存在Contact命名导出求助

1. 导入导出错误修复 #

报错原因是你用默认导入的方式引入了一个命名导出的组件。

• 你当前的组件是命名导出：

  export const Contact = () => { /* ... */ }
  

• 如果导入时写的是：

  import Contact from './pages/ContactUs'
  

  就会触发这个错误。

两种修复方式选其一：

• 方式一：改用命名导入

  import { Contact } from './pages/ContactUs'
  

• 方式二：把组件改成默认导出

  import React from 'react';
  
  const Contact = () => {
      // ...组件逻辑
  }
  
  export default Contact;
  

2. 新标签页按钮功能修复 #

你的代码里newWindow.Contact()是无效的——新打开的窗口全局对象里不存在这个函数，这也不是打开页面的正确方式。修改后的代码如下：

import React from 'react';

export const Contact = () => {
    const handleClick = () => {
        // 打开新标签页
        const newWindow = window.open('/new-page', '_blank');
        // 处理浏览器拦截情况
        if (!newWindow) {
            alert('浏览器拦截了新窗口，请允许弹窗权限');
            return;
        }
        // 可选：监听新窗口加载完成
        newWindow.addEventListener('load', () => {
            console.log('新页面加载完成');
            // 新页面会自行渲染，无需调用Contact函数
        });
    }

    return (
        <button onClick={handleClick}>Contact</button>
    );
}

关键修改点：

• 移除了无效的newWindow.Contact()调用
• 增加浏览器拦截的判断逻辑，提升用户体验
• 明确新页面加载后的正确操作（仅日志提示，无需额外调用组件）

内容的提问来源于stack exchange，提问作者Shashank gb