1

I have difficulties to understand how the next.js routing works and I think I'm using it wrong. When I navigate forward through the pages with Link, I have no problem, but when I use the browser back button it sometimes reload the previous page and sometimes stays on the same page whereas the url changed. Then I need to refresh the page manually

I guess this is something I do wrong, but can't figure out what

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;

books/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;

  • component/Catalogue.js :

    import Link from "next/link"; import { getStrapiMedia } from "../utils/medias"; import { Card } from 'react-bootstrap';

    const Catalogue = ({ products }) => {

    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} €</Card.Title>
              </Card.Body>
            </a>
          </Link>
        </Card>

      ))
      }
  </div>

);

    };

    export default Catalogue;

Rom-888
  • 681
  • 2
  • 9
  • 30
  • Please provide a basic reproducible example – DownloadPizza Jan 28 '21 at 17:59
  • For exemple : I'm on the homepage ('/'), click on shop button, landing on the shop page ('/books'). If I click on the browser back button the url goes back to ('/), but the screen still rends the shop component. I don't know what part of code I can provide – Rom-888 Jan 28 '21 at 18:03
  • For that exemple, on the file tree, the home page is /inder.js and the shop page is /books/index.js – Rom-888 Jan 28 '21 at 18:05
  • 1
    Providing your `/index.js` and `/books/index.js` would be helpful. – juliomalves Jan 28 '21 at 21:29
  • have you figures this out @Rom-888? I am having the same problem – Bruno Braga Aug 15 '21 at 13:04
  • No! I put this on hold for a while, but still not solved. Sorry – Rom-888 Aug 31 '21 at 14:10
  • Hi everyone! I've been faced with a similar issue that I describe here: https://stackoverflow.com/questions/69122288/next-js-router-doesnt-react-on-browsers-backward-button-on-some-pages There is a clickable example (production url) and some attempts to debug that failed. If anyone has an idea of what to check, how to debug, I would be grateful! – Dmitry Klymenko Sep 09 '21 at 17:16

0 Answers0