js控制next实现
使用 JavaScript 控制 Next.js 路由
在 Next.js 中，可以通过 next/router 或 next/navigation（App Router）实现路由控制。以下是两种常见场景的实现方法。
使用 next/router（Pages Router）
安装 next/router 后，可以通过 useRouter Hook 或直接引入 Router 对象控制路由跳转。
import { useRouter } from 'next/router';
function Page() {
const router = useRouter();
// 跳转到指定路径
const navigateToAbout = () => {
router.push('/about');
};
// 带参数跳转
const navigateWithQuery = () => {
router.push({
pathname: '/user',
query: { id: '123' },
});
};
// 替换当前路由（不保留历史记录）
const replaceRoute = () => {
router.replace('/login');
};
return (
<div>
<button onClick={navigateToAbout}>Go to About</button>
<button onClick={navigateWithQuery}>Go to User</button>
<button onClick={replaceRoute}>Replace Route</button>
</div>
);
}使用 next/navigation（App Router）
在 Next.js 13+ 的 App Router 中，路由控制通过 next/navigation 实现。
'use client';
import { useRouter } from 'next/navigation';
function Page() {
const router = useRouter();
// 跳转到指定路径
const navigateToAbout = () => {
router.push('/about');
};
// 替换当前路由
const replaceRoute = () => {
router.replace('/login');
};
// 前进/后退
const goBack = () => {
router.back();
};
return (
<div>
<button onClick={navigateToAbout}>Go to About</button>
<button onClick={replaceRoute}>Replace Route</button>
<button onClick={goBack}>Go Back</button>
</div>
);
}监听路由变化
可以通过 useEffect 监听路由变化并执行相应逻辑。
import { useEffect } from 'react';
import { useRouter } from 'next/router';
function Page() {
const router = useRouter();
useEffect(() => {
const handleRouteChange = (url) => {
console.log('Route changed to:', url);
};
router.events.on('routeChangeStart', handleRouteChange);
return () => {
router.events.off('routeChangeStart', handleRouteChange);
};
}, [router.events]);
return <div>Page Content</div>;
}动态路由跳转
动态路由跳转时，需确保路径参数与文件结构匹配。
import { useRouter } from 'next/router';
function Page() {
const router = useRouter();
const navigateToDynamic = () => {
// 假设存在 pages/post/[id].js
router.push('/post/123');
};
return (
<div>
<button onClick={navigateToDynamic}>Go to Dynamic Route</button>
</div>
);
}预加载路由
通过 router.prefetch 提前加载目标页面资源，提升用户体验。
import { useRouter } from 'next/router';
function Page() {
const router = useRouter();
useEffect(() => {
router.prefetch('/about');
}, [router]);
return <div>Prefetch Example</div>;
}以上方法覆盖了 Next.js 中常见的路由控制场景，适用于 Pages Router 和 App Router 的不同需求。
