嵌套页面不使用 HOC 加载静态文件

Question

通过使用 NextJS 我遇到了静态导出命令 next build && next export 的问题。

我添加了 HOC - Layout.js 以使用导航栏和页脚包装页面。我还有浅页 /pages/*.js 和嵌套页 /pages/products/*.js.

我的问题是 Navbar 和 Footer 中的图像只加载到浅页上，但导航到 /pages/products/test.js 会破坏图像，它们不会显示。

只有在导出和提供静态服务时才会发生这种情况 HTML。使用 npm run dev 进行开发时，所有图像都已正确加载。

components/Layout.js

const withLayout = Content => {
  return () => (
    <Container>
      <Navbar active={Content.displayName} />
      <Content />
      <Footer />
    </Container>
  );
};

export default withLayout;

pages/index.js


  // IMAGES WILL LOAD HERE (i.e. Logo in Navbar)
const Home = () => {
  render() {
    return (
      <p>Test</p>
    );
  }
}

Home.displayName = "Home";
export default withLayout(Home);

pages/products/test.js


  // IMAGES SET IN Layout.js WILL NOT BE LOADED
  // test.jpg WILL BE LOADED
const Test = () => {
  render() {
    return (
      <img src={"../../static/test.jpg"} />
    );
  }
}

Home.displayName = "Home";
export default withLayout(Test);

Answer 1

我通过创建并覆盖文件 ./pages/_app.js 解决了这个问题。 Layout 现在存在于那里并且不会在重定向时重新呈现。

import React from "react";
import App, { Container } from "next/app";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;

    return (
      <Container>
        <Navbar active={Component.displayName} />
        <Component {...pageProps} />
        <Footer />
        <style jsx global>{`
          html,
          body,
          #__next {
            height: 100%;
            width: 100%;
            margin: 0;
            font-family: "Catamaran", sans-serif;
            overflow-x: hidden;
          }

          body {
            position: relative;
          }
        `}</style>
      </Container>
    );
  }
}

export default MyApp;

嵌套页面不使用 HOC 加载静态文件

Nested pages not loading static files using HOC

javascript

reactjs

next.js