Next.js 如何使用 withRouter 高阶组件？

推荐答案

在 Next.js 中，withRouter 是一个高阶组件（HOC），用于将 router 对象注入到组件的 props 中。通过 withRouter，你可以在组件中访问路由信息，如 pathname、query、asPath 等。

// www.javascriptcn.com code example
import { withRouter } from 'next/router';

function MyComponent({ router }) {
  return (
    <div>
      <p>Current path: {router.pathname}</p>
      <p>Query: {JSON.stringify(router.query)}</p>
    </div>
  );
}

export default withRouter(MyComponent);

本题详细解读

1. withRouter 的作用

withRouter 是 Next.js 提供的一个高阶组件，用于将 router 对象注入到组件的 props 中。router 对象包含了当前路由的相关信息，如 pathname、query、asPath 等。

2. 使用 withRouter 的步骤

1. 导入 withRouter：首先需要从 next/router 中导入 withRouter。

   import { withRouter } from 'next/router';

2. 定义组件：定义一个普通的 React 组件，并在组件的 props 中接收 router 对象。

   function MyComponent({ router }) {
     return (
       <div>
         <p>Current path: {router.pathname}</p>
         <p>Query: {JSON.stringify(router.query)}</p>
       </div>
     );
   }

3. 使用 withRouter 包裹组件：使用 withRouter 高阶组件包裹你的组件，以便将 router 对象注入到组件的 props 中。

   export default withRouter(MyComponent);

3. router 对象的常用属性

• pathname：当前页面的路径，不包括查询参数。
• query：包含当前页面的查询参数的对象。
• asPath：浏览器地址栏中显示的完整路径，包括查询参数。

4. 注意事项

• withRouter 只能在客户端使用，因此在服务器端渲染时，router 对象可能不会包含完整的信息。
• 如果你使用的是函数组件，并且 Next.js 版本支持 React Hooks，你可以使用 useRouter Hook 来替代 withRouter，这样可以更简洁地访问路由信息。

// www.javascriptcn.com code example
import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();

  return (
    <div>
      <p>Current path: {router.pathname}</p>
      <p>Query: {JSON.stringify(router.query)}</p>
    </div>
  );
}

export default MyComponent;