1

我很难理解 next.js 路由是如何工作的，我认为我用错了。当我使用 Link 向前浏览页面时，我没有问题，但是当我使用浏览器后退按钮时，它有时会重新加载上一页，有时会停留在同一页面上，而 url 发生了变化。然后我需要手动刷新页面

我想这是我做错了，但不知道是什么

index.js：

import Head from "next/head";
import NewBooks from "../components/Homepage";
import { getProducts } from "../utils/api";

const HomePage = ({ products }) => {
  return (
    <div>
      <Head>
        <title>Classe moyenne éditions</title>
      </Head>
      <NewBooks products={products} />
    </div>
  );
};

export async function getStaticProps() {
  const products = await getProducts();
  return { props: { products } };
}

export default HomePage;

书籍/index.js：

import Head from "next/head";
import Catalogue from "../../components/Catalogue";
import { getProducts } from "../../utils/api";

const CataloguePage = ({ products }) => {
  return (
    <div>
      <Head>
        <title>Catalogue</title>
      </Head>
      <Catalogue products={products} />
    </div>
  );
};

export async function getStaticProps() {
  const products = await getProducts();
  return { props: { products } };
}

export default CataloguePage;

  • 组件/目录.js：

    从“下一个/链接”导入链接；从“../utils/medias”导入{getStrapiMedia}；从'react-bootstrap'导入{卡}；

    常量目录 = ({ 产品 }) => {

    return (

  <div className="container-cat">
      {products.map((_product) => (
        <Card id="lien" key={_product.id} alt="book" className="items">
          <Link href='/books/[name]' as={`/books/${encodeURIComponent(_product.name)}`}>
            <a>
              <Card.Body>
                <Card.Img variant="top" src={getStrapiMedia(_product.grid_pic.url)} width="200px" />
                <Card.Title>{_product.name}<br />{_product.author}<br />{_product.price} €&lt;/Card.Title>
              </Card.Body>
            </a>
          </Link>
        </Card>

      ))
      }
  </div>

);

    };

    导出默认目录；

4

0 回答 0