404 page button doesn't do anything

[cheddZy]

Issue:

On the 404 page, when you press the "Go back home" button, it won't take you back home.
Tried on: Firefox (No notable plugins) & Chrome Dev (No plugins at all).

Reproduce:

1. Go to https://www.pillarstack.com/404 (or any non-existing path)
2. Press the Go back home button
3. OR press the top right logo button, that acts as a home/back button
4. The URL should now show as the correct "https://www.pillarstack.com/" but the content on the page hasn't changed. Upon refreshing the page at that point you'll see the actual home page again.

If you leave the 404 page open for a little bit (it's a bit inconsistent mind you, but I was able to replicate the behavior a few times) then pressing the back button / home button will result in seeing the right content on the page in comparison to immediately pressing it upon visiting the 404 page.

No idea what this could be, I'm not experienced with Next.js routing so would be interested to know & get tagged on what the problem ended up being.

[by-huy]

@cheddZy Thanks for pointing this out! This is super strange and I don't have any idea why it's not working either haha. I'll dig into it whenever I have time : )

[Xiaozuoyi]

"use client";
import Button from "@/components/Button/Button";
import { useRouter } from "next/navigation";

export default function ErrorPage() {
    const router = useRouter();
  const goBackHome = () => {
    router.push("/");
  }
  return (
    <div className="h-screen flex items-center justify-center -m-20 flex-col ">
      <Button onClick={goBackHome}>Go Back home</Button>
    </div>
  );
}

When redirecting links, we can use either next/link or next/router to achieve it. Here, we will use next/router for redirection.

I don't have the environment configuration file .env, so the webpage cannot run. I cannot determine if the modification is correct.

[gursewak8642]

I am getting this error while settling up the project what should i do ?

[7D-codes]

I tested @Xiaozuoyi fix and it works, I replaced the getContent function with this code below so that I can see the webpage

// /app/utils/getContent.jsx

const localData = {
  items: [
  ],
  total: 0, 
};

export async function getContent({ tag, category, page }) {
  
  return {
    items: localData.items, 
    total: localData.total,
  };
}

I wanted to do a pull request but I didn't fix that so test it yourself with the new function that gives demo data :).

also @gursewak8642, that fixes your problem but If you want to do PR don't forget to change this func to the original one

[gursewak8642]

@7D-exe I am trying to setup the repo but it is asking for the tocken acess and acess_key as i have shared the screenshot above. Could you please share the .env setup file or help me to resolve the above error.

[7D-codes]

@gursewak8642 replace getContent func with the code I provided just copy and paste it in the same path written in the top of the snippet, you don't need to create .env file if you replaced the func

[gursewak8642]

@7D-exe Yeah the hero section is working fine but none of the tool's and suggestion's components are visible

[7D-codes]

@gursewak8642 that's because the site is built in a way to get tools/sites via an API, you need the dev keys to get the same sites in ur end, but you work on the site now.

its built like that so when he wants to upload a new site/tool he upload it in the database(Contentful) instead of updating the site code manually each time

[by-huy]

"use client";
import Button from "@/components/Button/Button";
import { useRouter } from "next/navigation";

export default function ErrorPage() {
    const router = useRouter();
  const goBackHome = () => {
    router.push("/");
  }
  return (
    <div className="h-screen flex items-center justify-center -m-20 flex-col ">
      <Button onClick={goBackHome}>Go Back home</Button>
    </div>
  );
}

When redirecting links, we can use either next/link or next/router to achieve it. Here, we will use next/router for redirection.

I don't have the environment configuration file .env, so the webpage cannot run. I cannot determine if the modification is correct.

Awesome, I also had the same idea using router.push. I'll be giving that a try!

[by-huy]

Also, bear with me @gursewak8642 since it's my first open source project haha but thanks for reporting these issues. I'll try to update the ReadME file with a proper project setup guide so you guys can get it up and running without any problems : )

[gursewak8642]

@huyngxyz Yes, sir. Of course, hats off to your efforts 🙌🙌, as I got to know about this from your Youtube channel. As I shared PillarStack with my friends, they also liked it a lot. One more thing could you please settle the components of pillerStack so that we can also access it in our local host too 🙌.

[Xiaozuoyi]

I found the reason. It was passed in the wrong way: href="/" ==> herf={"/"}
CleanShot 2024-03-14 at 13 00 25@2x