Reactjs 下一个js链接标记在生产环境中不起作用，但在本地可以正常工作

由于我的链接标签有问题，我已经阅读了所有我能找到的东西，但没有一个是有效的

我将在Ant design中使用Next Js

当我在本地运行go to shop按钮链接时，该链接正在工作（它会将您重定向到shop页面） 但是，当我构建或部署时，按钮不起作用，但是如果您将URL更改为/shop，它就会起作用

我还尝试删除了“商店”页面中的以下内容，该按钮起了作用：

从“ant”导入{message}
从“./components/clientComponents/shop/ProductCard”导入ProductCard

希望有人能帮我谢谢你

索引页

import Layout from "../components/clientComponents/Layout";
import Footer from "../components/clientComponents/footer/Footer";
import styled from "styled-components";
import { Button, Icon, Input } from "antd";
import Link from "next/link";

const Cover = styled.div`
  width: 100%;
  height: 85vh;
  background: url("../../static/images/cover.jpg");
  background-repeat: no-repeat;
  background-size: cover;

  .cover-container {
    height: 60vh;
    /* background: red;
    opacity: 0.5; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 6%;
    margin-right: 5.5%;

    .cover-button-container {
      display: flex;
      justify-content: space-around;
      width: 430px;

      .coverButton:hover {
        background: #fff;
        color: #1d1d1d;
      }
    }
  }

  h1 {
    color: #1d1d1d;
    font-size: 6em;
    font-family: "Anton", sans-serif;
  }

  h2 {
    color: #1d1d1d;
    margin-top: -3%;
    margin-bottom: 2%;
  }
`;

const Section1 = styled.div`
  /* background: rgb(249, 250, 252); */
  background: #fff;
  padding: 5%;
  h3 {
    font-family: "Anton", sans-serif;
  }

  button:hover {
    background: #fff;
    color: #1d1d1d;
    border: 0px;
  }

  .tile-1 {
    width: 100%;
    display: flex;
    justify-content: center;
    .left {
      flex: 3;

      img {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
    .right {
      background: #f5f7fa;
      flex: 1;
      padding: 2.6%;
      text-align: center;
      button {
        margin-top: 5%;
      }
      h3 {
        color: #1d1d1d;
        font-size: 3em;
      }
      h4 {
        margin-top: -5%;
      }
    }
  }

  .tile-2 {
    margin-top: 4%;

    width: 100%;
    display: flex;
    justify-content: center;

    .left {
      flex: 1;
      background: #f5f7fa;
      padding: 3.8%;
      text-align: center;

      h3 {
        color: #1d1d1d;
        font-size: 2.6em;
      }
    }

    .right {
      flex: 3;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
`;

const Section2 = styled.div`
  background: #f5f7fa;
  border-bottom: 1px solid #dfdfdf;
  border-top: 1px solid #dfdfdf;
  height: 40vh;
  margin-bottom: 5%;
  h1 {
    text-align: center;
    margin-top: 3%;
    margin-bottom: 2%;
  }
  .box-container {
    display: flex;
    justify-content: space-around;
    width: 80%;
    margin-left: 10%;

    .box-wrapper {
      background: #fff;
      height: 140px;
      width: 260px;
      text-align: center;
      border: 1px solid #dfdfdf;
      padding-top: 1%;

      h4 {
        margin-top: 2%;
      }
    }
  }
`;

const Section3 = styled.div`
  background: url("../../static/images/cover2.jpg");
  height: 60vh;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 7%;
  h1 {
    font-family: "Anton", sans-serif;
  }

  .subscribe-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 35%;
    height: 60vh;
    margin-left: 6%;

    text-align: center;
    input {
      border-radius: 0px;
      height: 50px;
      margin-bottom: 2%;
    }

    button {
      background: #1d1d1d;
      color: white;
      border: 0px;
      padding-top: 2%;
      border-radius: 0px;
      height: 50px;
    }

    button:hover {
      background: #fff;
      color: #1d1d1d;
    }
    h1 {
      font-size: 2.9em;
      margin-bottom: 1%;
    }

    span {
      margin-bottom: 2%;
    }
  }
`;

const StyledCoverButton = styled(Button)`
  color: white;
  background: #1d1d1d;
  border: 0px;
  font-size: 1.4em;
  padding: 3% 13% 10% 12%;
  border-radius: 0px;
`;

const StyledShopButton = styled(Button)`
  padding: 3% 13% 10% 12%;
  background: #1d1d1d;
  color: white;
  border-radius: 0px;
  margin-bottom: 5%;
`;
const Index = () => {
  return (
    <Layout>
      <Cover>
        <div className="cover-container">
          <h1>Suit Yourself</h1>
          <h2>Tailored Suits and Barong Since 1997</h2>
          <div className="cover-button-container">
            <StyledCoverButton className="coverButton" size="large">
              <Link href="/shop">Go To Shop</Link>
            </StyledCoverButton>

            <StyledCoverButton className="coverButton" size="large">
              <Link href="/customize">Customize</Link>
            </StyledCoverButton>
          </div>
        </div>
      </Cover>

      <Section1>
        <div className="tile-container">
          <div className="tile-1">
            <div className="left">
              <img src={"../../static/images/tile-1.jpg"} alt="" />
            </div>
            <div className="right">
              <h3>Corporate Attire Collection</h3>
              <h4>When professionals look good they feel good</h4>
              <StyledShopButton className="coverButton">
                Shop Now
              </StyledShopButton>
            </div>
          </div>
          <div className="tile-2">
            <div className="left">
              <h3>Make your wedding extra special</h3>

              <StyledShopButton className="coverButton">
                Shop Now
              </StyledShopButton>

              <hr></hr>
            </div>
            <div className="right">
              <img src={"../../static/images/tile-2.jpg"} alt="" />
            </div>
          </div>
        </div>
      </Section1>

      <Section2>
        <h1>What we can do for you?</h1>

        <div className="box-container">
          <div className="box-wrapper">
            <Icon
              type="bg-colors"
              style={{ fontSize: "80px", color: "   #C0C0C0" }}
            />
            <h4>Online Customization</h4>
          </div>
          <div className="box-wrapper">
            <Icon type="car" style={{ fontSize: "80px", color: "    #C0C0C0" }} />
            <h4>Delivered To Your Door</h4>
          </div>
          <div className="box-wrapper">
            <Icon
              type="scissor"
              style={{ fontSize: "80px", color: "   #C0C0C0" }}
            />
            <h4>Altering and Resizing</h4>
          </div>{" "}
          <div className="box-wrapper">
            <Icon type="home" style={{ fontSize: "80px", color: "   #C0C0C0" }} />
            <h4>Walk In Repair</h4>
          </div>
        </div>
      </Section2>

      <Section3>
        <div className="subscribe-container">
          <h1>Subscribe to our newsletter</h1>
          <span>Get the latest news, sale and other rewards</span>
          <Input placeholder="Enter your email address" required></Input>
          <Button>SUBSCRIBE</Button>
        </div>
      </Section3>
      <Footer />
    </Layout>
  );
};

export default Index;

巴别塔

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ],
    ["styled-components", { "ssr": true }]
  ]
}

---

您应该放置一个标签以应用

链接

代码。它可以是一个

标记，也可以是一个组件，例如，您想要使用的ANT组件

      <div className="cover-button-container">
        <StyledCoverButton className="coverButton" size="large">
          <Link href="/shop">
            <a>Go To Shop</a>
          </Link>
        </StyledCoverButton>

        <StyledCoverButton className="coverButton" size="large">
          <Link href="/customize">
            <a>Customize</a>
          </Link>
        </StyledCoverButton>
      </div>



这发生在我刚接触链接概念的时候。容易错过。我希望这对您有所帮助。
考虑将您的代码发布在邮件正文中，而不是作为图像发布。我也有同样的问题，如果我在babelrc中设置“style”：false，则所有链接都有效，但没有样式
/* eslint-disable */
const withLess = require("@zeit/next-less");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");
const withCSS = require("@zeit/next-css");
module.exports = withCSS();

// Where your antd-custom.less file lives
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, "./assets/antd-custom.less"), "utf8")
);

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables // make your antd custom effective
  },
  webpack: (config, { isServer }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback();
          if (typeof origExternals[0] === "function") {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === "function" ? [] : origExternals)
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: "null-loader"
      });
    }
    return config;
  }
});

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ],
    ["styled-components", { "ssr": true }]
  ]
}

      <div className="cover-button-container">
        <StyledCoverButton className="coverButton" size="large">
          <Link href="/shop">
            <a>Go To Shop</a>
          </Link>
        </StyledCoverButton>

        <StyledCoverButton className="coverButton" size="large">
          <Link href="/customize">
            <a>Customize</a>
          </Link>
        </StyledCoverButton>
      </div>