我的链接标签遇到问题,我已经阅读了所有可以找到的内容,但是没有任何效果。
我正在使用具有Ant设计的Next Js
当我在本地运行时,“前往商店”按钮链接有效(它将您重定向到商店页面)但是当我构建或部署该按钮时,该按钮将不起作用,但是如果将URL更改为/ shop,它将起作用。
我也尝试在商店页面中删除以下内容,并且该按钮起作用了:]
import {message} from'ant从“ ../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;
首页
import React, { Component } from "react"; import Layout from "../components/clientComponents/Layout"; import ProductCard from "../components/clientComponents/shop/ProductCard"; import Footer from "../components/clientComponents/footer/Footer"; import styled from "styled-components"; import { message } from "antd"; import testData from "../testData"; const MainWrapper = styled.div` background: rgb(249, 250, 252); overflow-x: hidden; width: 100%; display: flex; padding: 3% 5% 5% 5%; .right { width: 100%; display: flex; justify-content: space-evenly; flex-direction: row; flex-wrap: wrap; } .left { padding: 2%; margin-top: 1%; display: flex; height: 100vh; width: 300px; background: #fff; border-color: rgba(0, 0, 0, 0.09); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09); } `; const BackgroundHeader = styled.div` background: url("../static/images/shop-cover.jpg"); width: 100%; background-size: cover; background-repeat: no-repeat; background-position: 0px -200px; height: 250px; `; class Shop extends Component { state = { cart: [] }; handleAddItemToCart = item => { const newCart = [...this.state.cart, item]; this.setState({ cart: newCart }); message.success(`You've added ${item.title} to your cart`, 5); }; render() { return ( <Layout> <BackgroundHeader /> <MainWrapper> <div className="left">Filter</div> <div className="right"> {testData.map(item => ( <ProductCard item={item} addItemToCart={this.handleAddItemToCart} /> ))} </div> </MainWrapper> <Footer /> </Layout> ); } } export default Shop;
产品卡组件
import { Card, Icon, Popconfirm, Select } from "antd"; import styled from "styled-components"; const MainLayout = styled.div` .dot { position: absolute; top: 70%; right: 5%; height: 45px; width: 45px; background-color: #607d8b; border-radius: 50%; } `; const ProductCard = props => { const { Meta } = Card; const { title, price, image } = props.item; const renderAddToCartOption = () => { const { Option } = Select; return ( <div style={{ display: "flex", flexDirection: "column" }}> <span>Select Size</span> <Select defaultValue="lucy" style={{ width: "100%" }} // onChange={handleChange} > <Option value="jack">Extra Small</Option> <Option value="jacssk">Small</Option> <Option value="lucy">Medium</Option> <Option value="Yiminghe">Large</Option> <Option value="Yimissnghe">Extra Large</Option> </Select> </div> ); }; return ( <MainLayout> <Card hoverable style={{ width: 240, marginTop: "5%", borderColor: "rgba(0, 0, 0, 0.09)", boxShadow: "0 2px 8px rgba(0, 0, 0, 0.09)" }} cover={ <img alt="example" src={image} style={{ height: "290px", width: 205, marginLeft: "7%", marginTop: "2%" }} /> } > <Popconfirm icon={null} title={renderAddToCartOption()} onConfirm={() => props.addItemToCart(props.item)} okText="Quick Add" cancelText={"Cancel"} > <span className="dot"> <Icon type="shopping-cart" style={{ fontSize: "24px", position: "absolute", top: "24%", left: "20%", color: "white" }} /> </span> </Popconfirm> <Meta title={title} description={`Price: ₱${price}`} /> </Card> </MainLayout> ); }; export default ProductCard;
下一个配置
/* 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; } });
BABELRC
{
"presets": ["next/babel"],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
],
["styled-components", { "ssr": true }]
]
}
nex config babelrc主页遇到链接标记问题,我已经阅读了所有可以找到的内容,但是没有任何效果。当我在本地运行go-to shop时,我正在使用带有蚂蚁设计的Next Js ...
您应该放置一个标签以应用Link
代码。它可以是a
标记,也可以是组件,例如您要使用的ANT组件。