How to generate sitemap with react router

Question

I\'m trying to figure out how to dynamically generate sitemap in reactJS server side (express) web app. I\'m using react router.

Answer 1

You can generate the React Website sitemap in the following way.

1.open your index.html file and add this script:

<!-- Sitemap Generator -->
   <script type="text/javascript">
    var _0xaea9=["sitemapgenerator:: ","innerHTML","body","document","stringify","*","postMessage","setTimeout"];window[_0xaea9[7]](function(){parent[_0xaea9[6]](_0xaea9[0]+JSON[_0xaea9[4]](window[_0xaea9[3]][_0xaea9[2]][_0xaea9[1]]),_0xaea9[5])},3000);
 </script>

2.open the following url: http://botmap.io/

3.in that page type your website url: like http://www.google.io then click on Go button.

4.It will crawl all of the anchor tags starting from the landing page and all of the inner pages in your reactjs web site.

That's it, after that you can save it as XML format.

It may be useful to others.

Thank you.

Answer 2

If your site frequently changes, you need to dynamically create the sitemap. I was stuck here and found this effective solution, which can even generate a real time sitemap by calling API for my website in ReactJS, using NextJs. dynamic Sitemap Steps

You can do this by creating most of the public files like

1. sitemap.xml
2. rss.feed
3. robots.txt
4. humans.txt

That too with preserving the behaviour of ReactJS.

Answer 3

For simple ReactJS sitemap integration with React Router, you should check out the react-router-sitemap package.

It's fairly configurable as well, as you can see in the docs, so if you need to include change frequency or things like that, you should be able to do it no problem.

Or were you looking for a way to implement one yourself?