当前位置：首页 > JavaScript

js控制next实现

2026-03-15 17:37:51JavaScript

使用 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 提前加载目标页面资源，提升用户体验。

js控制next实现

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 的不同需求。