NextJS - Component.name在BUILD上有不同的值

Question

我有一个页面有不同的布局。为了切换布局，我在_app.js中使用Component.name． 它正在开发中工作，但在构建项目并使用npm start之后。似乎Component.name没有包含正确的值，使得布局组件被其他页面使用。

if (Component.name === 'Login') {
return <Component {...{ pageProps, toast }} />;
}
return (
<Layout>
<Component {...{ pageProps, toast }} />
</Layout>
);

我在这里错过了什么吗?或者这不是实现这样的东西的正确方法。

Answer 1

我也面临同样的问题。经过一番调查，我们发现这是因为文件在生产中被缩小了。我们可以在导出之前显式地设置组件名，这样我们就可以在生产环境中访问它了。

// Login Component
function Login() {....}
Login.displayName = "Login"
export default Login;

那么你可以用

访问它

if (Component.displayName === 'Login') {
return <Component {...{ pageProps, toast }} />;
}
return (
<Layout>
<Component {...{ pageProps, toast }} />
</Layout>
);

Answer 2

你可以使用路由器的路径名来检查:

if (["/login"].includes(router.pathname)) {
return <Component {...{ pageProps, toast }} />;
}
return (
<Layout>
<Component {...{ pageProps, toast }} />
</Layout>
);