Next.js中如何从_app.js向指定组件传递客户端props？

在Next.js的_app.js中，因为它是全局包裹所有页面的入口，要实现只给部分页面传客户端Props，有几种实用的方法：

方案1：通过路由路径判断传递 #

利用Next.js的useRouter钩子获取当前页面路径，在渲染页面组件时根据路径决定是否传入目标Props。

示例代码（_app.js）：

import { useRouter } from 'next/router';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  // 定义需要接收prop1的页面路径
  const allowedPaths = ['/', '/about'];
  // 准备要传递的客户端Props
  const clientProps = allowedPaths.includes(router.pathname) 
    ? { prop1: '你的客户端Prop值' } 
    : {};

  return <Component {...pageProps} {...clientProps} />;
}

export default MyApp;

这种方式直接通过路径匹配，适合页面路径固定的场景。

方案2：给页面组件添加静态标识 #

在需要接收Props的页面组件上定义静态属性，_app.js中通过检测这个属性来决定是否传递Props，比硬编码路径更灵活。

首先在Home.js和About.js中添加静态属性：

// Home.js
function Home({ prop1 }) {
  return <div>Home页面：{prop1}</div>;
}

Home.needsProp1 = true; // 添加静态标识
export default Home;

// About.js同理
function About({ prop1, prop2 }) {
  return <div>About页面：{prop1} {prop2}</div>;
}

About.needsProp1 = true;
export default About;

然后在_app.js中判断：

import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  const clientProps = Component.needsProp1 
    ? { prop1: '你的客户端Prop值', prop2: '可选的额外Prop' } 
    : {};

  return <Component {...pageProps} {...clientProps} />;
}

export default MyApp;

如果后续新增需要传Prop的页面，只需要给对应组件加静态标识即可，不用修改_app.js的路径列表。

方案3：使用React Context传递 #

如果需要传递的Props较多，或者后续有更多页面需要共享这些Props，用React Context会更优雅。

首先创建Context：

// contexts/PropContext.js
import { createContext, useContext } from 'react';

const PropContext = createContext(null);

export function PropProvider({ children, prop1, prop2 }) {
  return (
    <PropContext.Provider value={{ prop1, prop2 }}>
      {children}
    </PropContext.Provider>
  );
}

export function usePropContext() {
  return useContext(PropContext);
}

然后在_app.js中全局包裹：

import { PropProvider } from '../contexts/PropContext';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  // 客户端Props值，这里可以根据需要动态生成
  const clientProps = {
    prop1: '你的客户端Prop值',
    prop2: '额外Prop值'
  };

  return (
    <PropProvider {...clientProps}>
      <Component {...pageProps} />
    </PropProvider>
  );
}

export default MyApp;

最后在Home.js和About.js中消费Context：

// Home.js
import { usePropContext } from '../contexts/PropContext';

function Home() {
  const { prop1 } = usePropContext();
  return <div>Home页面：{prop1}</div>;
}

export default Home;

Dashboard.js不需要消费Context，自然就不会获取到这些Props，完美符合需求。

内容的提问来源于stack exchange，提问作者greentriangles1