js控制next实现
使用 Next.js 的 router 控制导航
Next.js 提供了 next/router 模块，可以通过编程方式控制页面跳转。安装 Next.js 后，直接引入 useRouter 钩子或 Router 对象。
import { useRouter } from 'next/router';
function MyComponent() {
const router = useRouter();
const handleNavigate = () => {
router.push('/target-page'); // 跳转到指定路径
};
return <button onClick={handleNavigate}>跳转</button>;
}支持动态路由参数传递：
router.push({
pathname: '/post/[id]',
query: { id: '123' },
});动态加载页面（懒加载）
通过 next/dynamic 实现按需加载组件或页面，优化性能：
import dynamic from 'next/dynamic';
const DynamicComponent = dynamic(() => import('../components/MyComponent'), {
loading: () => <p>Loading...</p>, // 可选加载状态
});
function HomePage() {
return <DynamicComponent />;
}路由事件监听
监听路由变化事件（如开始跳转、完成跳转）：
useEffect(() => {
const handleStart = (url) => console.log(`Loading: ${url}`);
const handleComplete = () => console.log('Navigation complete');
router.events.on('routeChangeStart', handleStart);
router.events.on('routeChangeComplete', handleComplete);
return () => {
router.events.off('routeChangeStart', handleStart);
router.events.off('routeChangeComplete', handleComplete);
};
}, [router]);重定向与路由守卫
在 getServerSideProps 或中间件中实现服务端重定向：
export async function getServerSideProps(context) {
const { req } = context;
if (!req.cookies.token) {
return {
redirect: {
destination: '/login',
permanent: false,
},
};
}
return { props: {} };
}客户端路由守卫可通过高阶组件（HOC）实现：
function withAuth(WrappedComponent) {
return (props) => {
const router = useRouter();
const [isAuthenticated, setIsAuthenticated] = useState(false);
useEffect(() => {
if (!isAuthenticated) router.push('/login');
}, [isAuthenticated]);
return <WrappedComponent {...props} />;
};
}修改 URL 而不触发导航
使用 router.replace 替换当前历史记录条目：
router.replace('/new-url'); // 类似于重定向获取当前路由信息
通过 router 对象访问当前路径、查询参数等：
const { pathname, query, asPath } = router;
console.log(pathname); // 输出当前路径（如 "/about"）注意事项
- 动态路由需提前在
pages目录下配置（如pages/post/[id].js）。 - 服务端渲染时，
router相关操作需在客户端生命周期（如useEffect）中执行。 - 使用
next/link组件处理常规导航可优化性能（预加载）。
