Question

在Node服务的Next.js应用程序页面的render方法中，我有一条简单消息：

render() {
    return <Message>{ pageErrorMsg }</Message>
}

pageErrorMsg来自单独的messages配置文件。这是基本文本，带有指向首页的链接，该链接由Link组件创建。链接的href和as属性又从urls配置文件中导入：

// urls.js

export default {
    home: {
        href: "/", 
        as: "/"
    }
}

// messages.js

import urls from '../urls'

export const pageErrorMsg = 
    <p>The page you're looking for either doesn't exist</p> 
    <p>Back to the <Link href={ urls.home.href } as={ urls.home.as } prefetch><a>homepage</a></Link>.</p>

请关注pageErrorMsg中的链接组件：

<Link href={ urls.home.href } as={ urls.home.as } prefetch><a>homepage</a></Link>

在服务器端，链接呈现为<a>homepage</a>，没有href属性；在客户端，情况甚至更糟，因为出现以下错误并且页面根本无法呈现：

Warning: Failed prop type: The prop `href` is marked as required in `Link`, but its value is `undefined`

Uncaught TypeError: Parameter 'url' must be a string, not undefined

如果我像这样使用实际的href和as：

<Link href="/" as="/" prefetch><a>homepage</a></Link>

我没有错误。但是我真的很想将它们导入为变量，当我直接在页面和组件中进行操作时，这种方式可以工作。我不明白为什么它在此配置文件中不起作用，以及如何使它起作用！

使用“下一步”的链接组件

0 个答案: