NextJS调用外部Bootstrap组件无响应问题求助（附代码）

你的问题根源是直接调用组件函数不会触发页面跳转——HotelDetails(id)只是执行了组件函数，返回了JSX元素，但这段元素没有被渲染到页面，也没有触发NextJS的路由机制，所以页面没变化，只有控制台打印日志。

下面是两种可行的解决方案：

方案1：编程式导航（useRouter） #

NextJS提供useRouter钩子实现编程式页面跳转，步骤如下：

第一步：把hotelDetails.tsx改成动态路由页面 #

将hotelDetails.tsx移动到pages/hotel/[id].tsx（新建hotel目录），修改代码获取路由参数：

import Card from 'react-bootstrap/Card';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import Button from 'react-bootstrap/Button';
import Hotel from '../../src/api/booking/booking';
import { useEffect, useState } from 'react';
import Container from 'react-bootstrap/Container';
import ListGroup from 'react-bootstrap/ListGroup';
import Form from 'react-bootstrap/Form';
import Layout from '@/src/components/layout';
import { useRouter } from 'next/router';

export default function HotelDetails() {
    const router = useRouter();
    const { id } = router.query; // 获取路由中的酒店ID

    console.log('当前酒店ID:', id);

    return(
        <Layout>   
            <Container>
                <p>Hello, World! 酒店ID: {id}</p>
            </Container>
        </Layout>
    );
}

第二步：修改Booking组件的按钮点击事件 #

在index.tsx中，将按钮的onClick改为调用router.push跳转：

// 替换原来的按钮代码
<Button onClick={() => router.push(`/hotel/${hotel[hotelItem]['hotelId']}`)} variant="info">View Details</Button>

方案2：声明式导航（Link组件） #

用NextJS的Link组件包裹按钮，更符合React的声明式风格：

import Link from 'next/link';

// 替换原来的按钮
<Link href={`/hotel/${hotel[hotelItem]['hotelId']}`} passHref>
  <Button variant="info">View Details</Button>
</Link>

额外优化：修复useEffect的依赖问题 #

你代码中的第二个useEffect没有依赖数组，会导致组件每次渲染都重复调用GetFacilitiesHotel，建议加上空数组让它只执行一次：

useEffect(() => {
    Hotel.GetFacilitiesHotel(1).then(data => {
        setFacility(data)
    })
}, []) // 空数组表示仅在组件挂载时执行一次

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