#reactjs #next.js
#reactjs #next.js
Вопрос:
У меня встроено приложение для электронной коммерции next.js . В этом у меня есть верхняя панель, содержащая контактную и другую информацию о ссылках, ниже которой есть длинный раздел и раздел поиска. Эти два элемента выполняются в 2 компонентах, и оба они объединены.
Теперь проблема в том, что при наведении курсора мыши на любую ссылку в компонентах конкретная страница обновляется (не перезагружается). В чем может быть проблема. Для лучшего понимания я разместил видео-удар. Пожалуйста, проверьте.
https://www.dropbox.com/s/tlh4e2os1ok2tpr/screen-recording.webm?dl=0
Я дал всю ссылку, как показано ниже,
<Link href="/" as="/">
<a className="mr-4">Help Center</a>
</Link>
Пожалуйста, проверьте мои приведенные ниже коды,
Top.js
const Top = () => {
return (
<div>
<div className="topBar">
<div className="container">
<div className="row">
<div className="col-sm-4 col-md-6">
<p className="text-center text-sm-left">
<Link href="/" as="/">
<a>Sell in RangerBee</a>
</Link>
</p>
</div>
<div className="col-sm-8 col-md-6">
<p className="text-center text-sm-right">
<Link href="/" as="/">
<a className="mr-4">Gift Card</a>
</Link>
<Link href="/" as="/">
<a className="mr-4">Help Center</a>
</Link>
<Link href="/" as="/">
<a>Download app</a>
</Link>
</p>
</div>
</div>
</div>
</div>
</div>
}
export default Top;
Header.js
const Header = () => {
return (
<div>
<div className="searchBar">
<div className="container-fluid">
<div className="row align-items-center">
<div className="col-8 col-md-2 col-lg-2">
<p>
<Link href="/" as="/">
<a><img src="/vercel.svg" alt="Example" className="img-fluid" /></a>
</Link>
</p>
</div>
<div className="col-4 col-md-2 col-lg-3 col-xl-2">
<div className="menuCategory">
<p className="main" onClick={() => changeMenuCategory()}><span>Shop By Category</span> <FontAwesomeIcon icon={faChevronDown} className="ml-2 pt-1 fa-down"/> <FontAwesomeIcon icon={faBars} className="ml-2 pt-1 fa-bars"/></p>
<ul className={toggleCategory ? "main-nav" : "main-nav d-none"}>
{menus amp;amp; menus.data.map((cat, index) => (
<li key={index}>
<Link href={"/products/" cat.cat_slug} as={"/products/" cat.cat_slug}><a title={cat.cat_name}>{cat.cat_name} <FontAwesomeIcon icon={faChevronRight} className="ml-2 float-right menu-arrow"/></a></Link>
<ul>
{cat.subcategory.map((subcat, index1) => (
<li key={index1 index}><Link href={"/products/" cat.cat_slug "/" subcat.sub_slug} as={"/products/" cat.cat_slug "/" subcat.sub_slug}><a title={subcat.sub_name}>{subcat.sub_name}</a></Link></li>
))}
</ul>
</li>
))}
</ul>
</div>
</div>
<div className="col-12 col-md-4 col-lg-4 col-xl-5 mt-3 mb-3 mt-md-0 mb-md-0">
<div className="search-box">
<div className="search-inner">
<input type="text" name="q" placeholder="Search for products, brands and much more" onClick={() => setToggleSearch(b => !b)} onFocus={(e) => trendingSearch(e)} onChange={(e) => startSearch(e)} />
<button><FontAwesomeIcon icon={faSearch}/></button>
</div>
<div className={toggleSearch ? "search-result" : "search-result d-none"}>
<ul ref={dropdown}>
{trending !== null amp;amp; searched === null amp;amp; trending.data.length > 0 amp;amp; <li className="trending">Trending Search</li>}
{trending !== null amp;amp; searched == null amp;amp; trending.data.length > 0 amp;amp;
trending.data.map((trending, index) => (
<li key={index}><Link href={"/products/" trending.trending_slug} as={"/products/" trending.trending_slug}><a>{trending.trending_name}</a></Link></li>
))
}
{searched !== null amp;amp; searched.data.length > 0 amp;amp;
searched.data.map((search, index) => (
<li key={index}>
<Link href={search.search_url} as={search.search_url}>
{search.images.length > 0 ?
<a><img src={api.IMAGE_PRODUCTS "/" search.images[0].image_name} alt={search.search_name} /> {search.search_name}</a>
:
<a>{search.search_name}</a>
}
</Link>
</li>
))
}
</ul>
</div>
</div>
</div>
<div className="col-12 col-md-4 col-lg-3">
<div className="text-center text-md-right">
<div className="d-inline loginDrop">
<Link href={!isAuthenticated ? "/login" : "/profile"} as={!isAuthenticated ? "/login" : "/profile"}>
<a className="signinBtn mr-5">{!isAuthenticated ? "Sign In" : "My Account"}</a>
</Link>
<div className={!isAuthenticated ? "login-content" : "login-content logout-content"}>
<p>amp;nbsp;</p>
<div className="login-inner">
<Link href={!isAuthenticated ? "/login" : "/profile"} as={!isAuthenticated ? "/login" : "/profile"}><a><FontAwesomeIcon icon={faUserCircle} className="mr-2"/> Your Profile</a></Link>
<Link href={!isAuthenticated ? "/login" : "/orders"} as={!isAuthenticated ? "/login" : "/orders"}><a><FontAwesomeIcon icon={faBoxOpen} className="mr-2 orderIcon"/> Orders</a></Link>
<Link href={!isAuthenticated ? "/login" : "/wishlist"} as={!isAuthenticated ? "/login" : "/wishlist"}><a><FontAwesomeIcon icon={faHeart} className="mr-2"/> Whishlist</a></Link>
<div className="otherDrop">
{!isAuthenticated ?
<>
<p className="first">Don't have an account?</p>
<p className="register"><Link href="/register" as="/register"><a>Register</a></Link></p>
<p className="login"><Link href="/login" as="/login"><a>Login</a></Link></p>
</>
:
<p className="login"><a href="#" onClick={deauthenticate}>Logout</a></p>
}
</div>
</div>
</div>
</div>
<Link href="/cart" as="/cart">
<a className="cartBtn"><FontAwesomeIcon icon={faShoppingCart} className="mr-xl-1"/> Cart <span>{carts[0] === null ? 0 : carts.length}</span></a>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
}
export default Header;
Layout.js
import Head from 'next/head';
import * as Main from './Index'
import './styles/Index';
const Layout = ({ children, title }) => (
<div>
<Head>
<title>{ title }</title>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<Main.Top/>
<Main.Header/>
<div>
{ children }
</div>
</div>
);
export default Layout;
next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass({
cssLoaderOptions: {
url: false
}
})
Есть ли какие-либо проблемы с моим кодом?
Я использую sass для стилизации. В чем может быть проблема. Я много искал и не мог найти никакого решения. На самом деле я новичок в next.js . Поэтому я не могу найти решение.
Комментарии:
1. Можете ли вы привести пример, с которым мы можем работать? Какой-нибудь пример репозитория или что-то в этом роде
Ответ №1:
Как сказано в их документах, next/Link примите реквизиты href и as , где:
href : Страница, на которую он должен перейти, этот путь никогда не изменится во время выполнения.
as : Что-то вроде декоратора, как ссылка должна отображаться для пользователя. Это может измениться во время выполнения.
Как уже было сказано, давайте посмотрим на одну из ваших ссылок:
<Link href={"/products/" trending.trending_slug} as={"/products/" trending.trending_slug}><a>{trending.trending_name}</a></Link>
В этом случае ваш href динамический меняется в зависимости от вашего тренда, и это должна быть страница, которая существует в вашем проекте, например pages/product/trending , и если тренд является динамическим, вы можете использовать pages/product/[trending] , а затем в as свойстве вы должны использовать динамическую ссылку, как вы уже делаете, /products/" trending.trending_slug .
Взгляните на их документы об этом: https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes
Вот проблема, которая выглядит как та же проблема: https://github.com/vercel/next.js/issues/11157
Комментарии:
1. Теперь ошибка 404 решена. Но прикрепленное видео все еще не исправлено.