Next.js 中，你可以通過多種方式實現編程式導航（即通過代碼而非 <Link> 組件跳轉頁面）。以下是完整的實現方法：

1. 使用 useRouter Hook（函數組件）

這是最常用的方法，適用于函數組件：

import { useRouter } from 'next/router';function MyComponent() {const router = useRouter();const handleClick = () => {// 基本跳轉router.push('/target-page');// 帶查詢參數router.push({pathname: '/target-page',query: { id: 123 },});// 替換當前歷史記錄而不是添加新記錄// router.replace('/target-page');};return (<button onClick={handleClick}>跳轉到目標頁</button>);
}

2. 使用 withRouter HOC（類組件）

如果你使用類組件，可以使用 withRouter 高階組件：

import { withRouter } from 'next/router';class MyComponent extends React.Component {handleClick = () => {this.props.router.push('/target-page');};render() {return (<button onClick={this.handleClick}>跳轉到目標頁</button>);}
}export default withRouter(MyComponent);

3. 直接使用 Router 對象

不需要組件時可以直接使用 Router 對象：

import Router from 'next/router';// 在任何地方使用
Router.push('/target-page');

4. 高級跳轉選項

帶查詢參數和 hash

router.push({pathname: '/post',query: { id: '123' },  // 查詢參數hash: 'comments',      // hash 片段
});

替換當前歷史記錄

router.replace('/target-page'); // 不會在歷史記錄中添加新條目

預加載頁面

// 預加載目標頁面資源
Router.prefetch('/target-page');

5. 路由事件監聽

import Router from 'next/router';// 路由變化開始
Router.events.on('routeChangeStart', (url) => {console.log('路由開始變化:', url);
});// 路由變化完成
Router.events.on('routeChangeComplete', (url) => {console.log('路由變化完成:', url);
});// 路由變化錯誤
Router.events.on('routeChangeError', (err, url) => {console.log('路由變化錯誤:', err, url);
});// 取消監聽
Router.events.off('routeChangeStart', handler);

6. 動態路由跳轉

對于動態路由頁面：

// 跳轉到 /post/[pid].js
router.push('/post/123');// 或者使用對象形式
router.push({pathname: '/post/[pid]',query: { pid: '123' },
});

7. 獲取路由信息

const router = useRouter();// 獲取當前路徑
console.log(router.pathname); // /current-path// 獲取查詢參數
console.log(router.query); // { id: '123' }

8. 等待頁面加載完成

const handleClick = async () => {await router.push('/target-page');// 這里可以執行跳轉后的操作console.log('頁面跳轉完成');
};

注意事項

1. 淺路由：使用 shallow: true 可以在不運行數據獲取方法的情況下改變 URL

   router.push('/?counter=1', undefined, { shallow: true });
   

2. 外部鏈接：對于外部網站，使用 window.location 或 <a> 標簽

3. 性能：對于重要頁面，考慮使用 prefetch 提高用戶體驗

4. 滾動行為：默認會滾動到頂部，可以通過 scroll: false 禁用

   router.push('/target-page', undefined, { scroll: false });
   

完整示例

import { useRouter } from 'next/router';
import { useEffect } from 'react';export default function Page() {const router = useRouter();useEffect(() => {// 預加載可能訪問的頁面router.prefetch('/dashboard');}, []);const handleLogin = async () => {await fetch('/api/login', { method: 'POST' });router.push({pathname: '/dashboard',query: { from: 'login' },});};return (<div><h1>歡迎頁</h1><button onClick={handleLogin}>登錄并跳轉</button><button onClick={() => router.replace('/guest')}>游客訪問</button></div>);
}

這些方法覆蓋了 Next.js 中編程式導航的所有常見用例，你可以根據具體需求選擇最適合的方式。