【发布时间】：2021-08-08 12:05:11
【问题描述】：
我不明白为什么当我在 nextjs 应用程序中刷新页面时，我总是回到索引页面。 我在 index.js 中有一个带有目录页面的电子商务 SPA，并且产品通过动态 [name].js 页面显示。如果我通过浏览器刷新或后退按钮导航，则路由是一团糟。我想我错过了 nextjs 的良好实践中的一些东西。
index.js
import Head from "next/head";
import Catalogue from "../../components/Catalogue";
import { getProducts } from "../../utils/api";
const HomePage = ({ products }) => {
return (
<div>
<Head>
<title>Catalogue</title>
<meta
name="description"
content="Classe moyenne éditions publie des livres et multiples d'artistes, émergeants ou reconnus, en France et à l'international."
/>
<meta
name="keywords"
content="Edition d'artiste, Livres, prints, multiples, art books, librairie, concept store, Bookshop, Bookstore"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</Head>
<Catalogue products={products} />
</div>
);
};
export async function getStaticProps() {
const products = await getProducts();
return { props: { products } };
}
export default HomePage;
[名称].js
const ProductPage = ({ product }) => {
const router = useRouter();
if (router.isFallback) {
return <div>Loading products...</div>;
}
return (
<div className="wrapper">
<Head>
<title>
{product.name} {product.author}
</title>
</Head>
<div className="col right" key={product.id}>
<div className="colophon" key={product.id}>
<p>
{product.annee}
<br />
Format : {product.size} <br />
{product.pages} pages
<br />
{product.cover} <br />
Printing : {product.printing}
<br />
Paper : {product.paper}
<br />
{product.copies} exemplaires
<br />
{product.price} € + Shipping
<br />
<br />
</p>
<div className="colophon">
<p style= {{
width: '50%',
textAlign: 'end',
color: '#6223f5' }}>
The website is under maintenance. To order a book, please send us an email at <a href="mailto:hello@cmeditions.fr" style={{ textDecoration: 'underline' }}>Hello</a>
</p>
{product.status === true ? (
<button
className="snipcart-add-item buy-button "
variant="dark"
onMouseEnter={(e) => handleEnter(e)}
onMouseOut={(e) => handleExit(e)}
data-item-id={product.id}
data-item-price={product.price}
data-item-url={router.asPath}
data-item-image={getStrapiMedia(product.grid_pic.url)}
data-item-name={product.name}
data-item-description={product.author}
v-bind="customFields"
>
BUY ME!
</button>
) : (
<div className="text-center mr-10 mb-1">
<div
className="p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex"
role="alert"
>
<span className="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">
Coming soon...
</span>
<span className="font-semibold mr-2 text-left flex-auto">
This article is not available yet.
</span>
</div>
</div>
)}
</div>
</div>
</div>
</div >
);
};
export default ProductPage;
export async function getStaticProps({ params }) {
const product = await getProduct(params.name);
return { props: { product } };
}
// This function gets called at build time
export async function getStaticPaths() {
// Call an external API endpoint to get products
const products = await getProducts();
// Get the paths we want to pre-render based on posts
const paths = products.map(
(product) => `/books/${product.name}`
);
// We'll pre-render only these paths at build time.
// { fallback: false } means other routes should 404.
return { paths, fallback: false };
}
我在 nextjs 文档上读到了这个，它可以成为解决方案的一部分吗？..
如果页面使用可选的包罗万象的路由，则提供 null、[]、 undefined 或 false 以呈现最根路由。例如，如果您 供应 slug: false for pages/[[...slug]], Next.js 将静态 生成页面/。
【问题讨论】：
-
如果有人能解释一下为什么本地刷新只是刷新我的页面，而在生产中它会引导我到 / 路线？
-
我发现与strapi电子商务启动器的唯一区别是后备：false（在启动器中为true）。会不会是从那里来的？
-
我也注意到了完全相同的问题。我正在使用 firebase 进行生产。 @Rom-888，你找到解决方案了吗？
-
我也使用 firebase。我在另一个应用程序中再次遇到同样的问题...
-
我尝试在 Vercel 上部署，问题解决了。但实际上，我不知道 firebase 出了什么问题......
标签： javascript reactjs routes next.js