Nextjs 页面刷新总是带我到index.js

Question

Nextjs 页面刷新总是带我到index.js

Rom*_*888 7 javascript routes reactjs next.js

我不明白为什么当我刷新 nextjs 应用程序中的页面时，我总是回到索引页面。\n我有一个电子商务 SPA，其中包含 index.js 中的目录页面，并且产品通过动态显示[名称].js 页面。如果我通过浏览器刷新或后退按钮进行导航，路由就会变得一团糟。我想我错过了 nextjs 的一些良好实践。

\n

索引.js

\n

import Head from "next/head";\nimport Catalogue from "../../components/Catalogue";\nimport { getProducts } from "../../utils/api";\n\nconst HomePage = ({ products }) => {\n  return (\n    <div>\n      <Head>\n        <title>Catalogue</title>\n        <meta\n          name="description"\n          content="Classe moyenne \xc3\xa9ditions publie des livres et multiples d'artistes, \xc3\xa9mergeants ou reconnus, en France et \xc3\xa0 l'international."\n        />\n        <meta\n          name="keywords"\n          content="Edition d'artiste, Livres, prints, multiples, art books, librairie, concept store, Bookshop, Bookstore"\n        />\n        <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n      </Head>\n      <Catalogue products={products} />\n    </div>\n  );\n};\n\nexport async function getStaticProps() {\n  const products = await getProducts();\n  return { props: { products } };\n}\n\nexport default HomePage;\n

Run Code Online (Sandbox Code Playgroud)\n

[名称].js

\n

const ProductPage = ({ product }) => {\n\n  const router = useRouter();\n  if (router.isFallback) {\n    return <div>Loading products...</div>;\n  }\n\n  return (\n    <div className="wrapper">\n      <Head>\n        <title>\n          {product.name} {product.author}\n        </title>\n      </Head>\n      <div className="col right" key={product.id}>\n        <div className="colophon" key={product.id}>\n          <p>\n            {product.annee}\n            <br />\n            Format : {product.size} <br />\n            {product.pages} pages\n            <br />\n            {product.cover} <br />\n            Printing : {product.printing}\n            <br />\n            Paper : {product.paper}\n            <br />\n            {product.copies} exemplaires\n            <br />\n            {product.price} \xe2\x82\xac + Shipping\n            <br />\n            <br />\n          </p>\n          <div className="colophon">\n            <p style= {{ \n              width: '50%',\n              textAlign: 'end',\n              color: '#6223f5' }}>\n              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>\n            </p>\n            {product.status === true ? (\n              <button\n                className="snipcart-add-item buy-button "\n                variant="dark"\n                onMouseEnter={(e) => handleEnter(e)}\n                onMouseOut={(e) => handleExit(e)}\n                data-item-id={product.id}\n                data-item-price={product.price}\n                data-item-url={router.asPath}\n                data-item-image={getStrapiMedia(product.grid_pic.url)}\n                data-item-name={product.name}\n                data-item-description={product.author}\n                v-bind="customFields"\n              >\n                BUY ME!\n              </button>\n            ) : (\n              <div className="text-center mr-10 mb-1">\n                <div\n                  className="p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex"\n                  role="alert"\n                >\n                  <span className="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">\n                    Coming soon...\n                  </span>\n                  <span className="font-semibold mr-2 text-left flex-auto">\n                    This article is not available yet.\n                  </span>\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div >\n  );\n};\n\nexport default ProductPage;\n\nexport async function getStaticProps({ params }) {\n  const product = await getProduct(params.name);\n  return { props: { product } };\n}\n\n// This function gets called at build time\nexport async function getStaticPaths() {\n  // Call an external API endpoint to get products\n  const products = await getProducts();\n  // Get the paths we want to pre-render based on posts\n  const paths = products.map(\n    (product) => `/books/${product.name}`\n  );\n  // We'll pre-render only these paths at build time.\n  // { fallback: false } means other routes should 404.\n  return { paths, fallback: false };\n}\n

Run Code Online (Sandbox Code Playgroud)\n

我在 nextjs 文档上读到了这篇文章，它可以成为解决方案的一部分吗？..

\n

\n
如果页面使用可选的 catch-all 路由，请提供 null、[]、\nundefined 或 false 以呈现最根路由。例如，如果您为pages/[[...slug]]提供slug: false，Next.js 将静态生成页面/。
\n

\n

Answer 1

nic*_*ico 2

pathson的格式getStaticPaths错误。

这是文档。 https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static- Generation

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) => ({ params: { name: product.name } })
  );
  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false };
}

Run Code Online (Sandbox Code Playgroud)

更新

我已经在 local 和CSB上尝试了您的代码，它似乎按预期工作。

你说它只发生在生产环境中，你将它部署在哪里？部署过程中可能会出现问题，因此您可能需要联系您的服务提供商。

另外，我想知道你把页面目录放在哪里。nextjs 要求页面目录位于根目录或src目录中。

https://nextjs.org/docs/advanced-features/src-directory

谢谢。但我在生产上仍然遇到同样的问题。如果我在产品页面上并单击刷新，浏览器上的 URL 仍然是 /books/[name]，但在屏幕上，我回到了索引 (2认同)

归档时间：	4 年，5 月前
查看次数：	5219 次
最近记录：	2 年，10 月前