Only pre renders home or landing page but not other routes?

[kaloraat]

Bug Report

Current Behavior It Only pre renders home/main or landing page not other routes. I am using react-router-dom.

Reproducible demo https://priceless-curran-c32657.netlify.app/about I have deployed to netlify. you can try on this on /about page. If you click view page source and search for "This is about". It is not found.

However it works on home page, you can click view page source and search for text "Give it a title" or "Write your story" it is found.

This issue was also asked on stack overflow.

[mohcinenazrhan]

Actually react-snap scan links like this <Link to="/about/">about</Link>, not the declared routes, add links that match a route for other pages and test.

[kaloraat]

@mohcinenazrhan sorry I didn't understand.. I have two page in my app. One is pre-rendered, other is not. I want to know why its happening and the possible solution. It's just a simple react app using react-router-dom? Is there something special needs to be done?? I have no idea what you are talking about declared routes, add links that match a route for other pages??

[mohcinenazrhan]

@kaloraat does your app have a link component like this <Link to="/page/">page</Link> for the page that is not pre-rendered?

[kzatin]

Has anyone found solution for this problem? I am having exactly same problem and its only prerender home page not other routes.

[joshbedo]

Like @mohcinenazrhan said react-snap only crawls pages it finds with <Link to="/about">About</Link>. If you don't have a link it won't crawl the page.

[ricky11]

it should crawl all links declared on the page, I have had no issues.. you may try the forked version of react-snap which I belive allows you to declare which routes to include or exclude.

[maxmedina05]

I want to do exactly the opposite. Can I pre-render just one single route? for example. ignore index.html but prerender about.html

[zaykhere]

@mohcinenazrhan Where do I declare those Link tags?

[SiimTulev]

I am having this problem too. It also puts the main page code on other pages. I guess I need to make my program for that.

[komxvl]

Does anybody resolved this issue ??

[atjpatatatj2]

I had the same issue and found the solution for me! It didn't pick up pages linked in the navigation. I added the links on the main page, now it picked them up :)

[Abderrahmenla]

Workaround Solution Found

I encountered the same issue with react-snap, and I managed to find a workaround solution that might be helpful to others facing similar problems. The issue seems to be related to certain components causing problems during pre-rendering.

I've implemented the following code snippet in my project, and it has successfully resolved the issue for me:

const Component = () => {
  // Check if the user agent is ReactSnap
  const isSnap = navigator.userAgent === 'ReactSnap';

  return (
    <div className="main">
      <>
        { !isSnap && <ComponentToKeepDynamic /> }
      </>
    </div>
  );
};

export default Component;

This code allows you to conditionally render components based on whether the user agent is ReactSnap or not. It effectively avoids rendering certain elements during the pre-rendering process, which can be particularly useful when dealing with components causing react-snap issues.

I hope this workaround proves helpful to others facing a similar situation. Please let me know if you have any questions or need further assistance!