React项目导入Button组件运行报错，新手寻求解决方法

核心错误原因 #

你当前运行的是React Web项目，错误导入了仅适用于React Native移动端开发的Button组件，结合你使用的variant属性以及已经引入的react-bootstrap依赖判断，你需要调用的是react-bootstrap提供的按钮组件。

具体修复步骤 #

1. 修正Button组件的导入语句
   将原有导入代码：

import { Button } from 'react-native';

替换为：

import { Button } from 'react-bootstrap';

2. 实现点击跳转功能（可选，按需选择）

• 若为项目内路由跳转（使用React Router）：
  先导入路由钩子：

import { useNavigate } from 'react-router-dom';

在组件内添加逻辑并绑定到按钮：

export default function ReservedListView() {
  const navigate = useNavigate();
  // 其余原有逻辑保持不变
  return (
    // 原有代码省略
    <Button 
      variant="primary" 
      onClick={() => navigate('/你要跳转的页面路由')}
    >
      跳转
    </Button>
  )
}

• 若为跳转外部站点：
  直接给按钮绑定点击事件即可：

<Button 
  variant="primary" 
  onClick={() => window.open('外部站点地址', '_blank')}
>
  跳转
</Button>

额外优化建议 #

你已经导入了react-bootstrap的Table组件，可以直接替换代码里的原生table标签，样式匹配度更高，替换方式为：
将<table id="students" class="table">改为<Table id="students" />，无需额外添加class属性。

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