React JS中如何为Button按钮绑定跳转至其他页面的功能？

你当前使用的是原生HTML <button> 标签，as 是React-Bootstrap封装的UI组件才支持的属性，原生标签无法识别该属性，也不会解析to参数完成路由跳转，因此点击后没有响应。

• 方案1：使用React-Bootstrap提供的Button组件（最推荐）
  先导入对应依赖：

  import { Button } from 'react-bootstrap';
  import { Link } from 'react-router-dom';
  

  替换代码中的原生button即可：

  <Button as={Link} to="/Room">See Room</Button>
  

• 方案2：继续使用原生button，配合编程式导航实现跳转
  先导入路由导航钩子：

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

  在组件内部声明导航方法：

  const navigate = useNavigate();
  

  修改button代码绑定点击事件：

  <button onClick={() => navigate('/Room')}>See Room</button>
  

• 方案3：用Link组件直接包裹原生button

  <Link to="/Room">
    <button>See Room</button>
  </Link>
  

• 确保React Router版本为v6及以上，API语法和上述示例匹配
• 确认路由配置中已注册/Room对应的页面路由
• 确认应用根组件已包裹在<BrowserRouter>标签下

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