React从next/navigation和next/router导入useRouter区别

在Next.js项目中，从next/navigation和next/router导入useRouter有以下几点不同，它们分别适用于不同的Next.js版本，并提供不同的功能：

next/router

• 版本兼容性：next/router适用于Next.js v13之前的版本。
• 功能：提供路由功能，包括导航、访问当前路由和处理路由事件。
• 示例用法：

  import { useRouter } from 'next/router';
  
  function MyComponent() {
    const router = useRouter();
  
    const handleNavigation = () => {
      router.push('/another-page');
    };
  
    return (
      <button onClick={handleNavigation}>前往另一页</button>
    );
  }
  
  export default MyComponent;
  

next/navigation

• 版本兼容性：next/navigation是在Next.js v13中引入的，与App Router功能相关联。
• 功能：为App Router（服务器组件）和客户端组件提供现代化和优化的路由处理方式。包括改进的数据获取、布局渲染和导航功能。
• 示例用法：

  import { useRouter } from 'next/navigation';
  
  function MyComponent() {
    const router = useRouter();
  
    const handleNavigation = () => {
      router.push('/another-page');
    };
  
    return (
      <button onClick={handleNavigation}>前往另一页</button>
    );
  }
  
  export default MyComponent;
  

主要区别：

1. 版本关联：

   • next/router适用于Next.js v13之前的项目，使用传统的页面路由。
   • next/navigation适用于Next.js v13及以上版本，使用App Router和最新的优化特性。

2. 功能改进：

   • next/navigation提供了一个改进的API，更好地支持服务器组件和现代React特性。

3. 使用场景：

   • 如果项目使用的是Next.js v13及以上版本或者想要利用最新的优化特性，推荐使用next/navigation。
   • 如果项目使用的是Next.js v13之前的版本或者需要维护旧项目，使用next/router是合适的选择。

结论：

对于新项目或者迁移到Next.js v13的项目，建议使用next/navigation以利用框架中的最新功能和优化。然而，如果需要维护或者操作旧项目，使用next/router是合适的选择。

---

英语版

In a Next.js project, the difference between importing useRouter from next/navigation and next/router lies in the versions of Next.js they are associated with and the functionalities they offer. Here’s a detailed comparison:

next/router

• Version Compatibility: next/router is used in Next.js versions prior to v13.
• Functionality: It provides routing functionalities including navigation, accessing the current route, and handling route events.
• Example Usage:

  import { useRouter } from 'next/router';
  
  function MyComponent() {
    const router = useRouter();
  
    const handleNavigation = () => {
      router.push('/another-page');
    };
  
    return (
      <button onClick={handleNavigation}>Go to another page</button>
    );
  }
  
  export default MyComponent;
  

next/navigation

• Version Compatibility: next/navigation is introduced in Next.js 13 with the new App Router feature.
• Functionality: It provides a more modern and optimized approach to handling routing in Next.js, specifically designed for the App Router (server components) and Client Components. It includes improvements in data fetching, layout rendering, and navigation.
• Example Usage:

  import { useRouter } from 'next/navigation';
  
  function MyComponent() {
    const router = useRouter();
  
    const handleNavigation = () => {
      router.push('/another-page');
    };
  
    return (
      <button onClick={handleNavigation}>Go to another page</button>
    );
  }
  
  export default MyComponent;
  

Key Differences:

1. Version Association:

   • next/router is for projects using the Pages Router (pre v13).
   • next/navigation is for projects using the App Router (v13+).

2. Functional Improvements:

   • next/navigation provides an improved API with better support for server components and modern React features.

3. Use Case:

   • Use next/router if you are working with Next.js versions before 13 or using the traditional Pages Router.
   • Use next/navigation if you are using Next.js 13 with the App Router and want to leverage the latest improvements in navigation and routing.

Conclusion:

For new projects or when migrating to Next.js 13, it’s recommended to use next/navigation to take advantage of the latest features and optimizations in the framework. However, if maintaining or working on an older project, next/router is the appropriate choice.