I can not get it working on my CRA app

[raminious]

Hello everyone!
Giscus looks amazing!! Great Jobbb

I tried to install giscus on my create-react-app project but the problem is the comments are shared in all pages. My goal is to have each page have its own comments.

Here you can find my project https://pikaso.app

and here is how I've integrated giscus-react with my app https://github.com/pikasojs/pikaso-site/blob/master/src/layouts/AppLayout/index.tsx#L175

Also not sure this is important or not but the app is using HashRouter for routing.

 <Giscus
  repo="pikasojs/pikaso"
  repoId="XXXXXX"
  category="Documentation"
  categoryId="DIC_kwDOEp2rpM4B_Wuh"
  mapping="pathname"
  reactionsEnabled="0"
  emitMetadata="0"
  theme="light"
/>

I appreciate your help to fix the issue before people start commenting

Thanks in advance

---

Ps: I'm reading source code of @giscus/react. it seems it's falling back to default here while I'm passing the props correctly 🤔

[laymonage]

Hey, thanks for the report. For now, giscus uses window.location.pathname for its pathname mapping. On SPAs that use hash-based routing, this always results in the pathname being / (replaced as index by giscus). You can see it for yourself by checking the window.location.pathname value on all your pages using the DevTools console in your web browser.

To get around this, you can try changing your code to use the specific mapping and use the location.pathname from your router, e.g.

          <Giscus
            key={location.pathname}
            repo="pikasojs/pikaso"
            repoId="MDEwOlJlcG9zaXRvcnkzMTIzMjI5ODA="
            category="Documentation"
            categoryId="DIC_kwDOEp2rpM4B_Wuh"
            mapping="specific"
            term={location.pathname}
            reactionsEnabled="0"
            emitMetadata="0"
            theme="light"
          />

[raminious]

It did the job 🚀 🚀 Thank you 🤝 🤝