React Dynamic Sitemap

Never have to worry about updating your sitemap again!

This component will scan through your React Router and dynamically generate your sitemap

Note: This has only been used with React Router v4, earlier versions might not work

Setup

npm i react-dynamic-sitemap

Usage

You should already have a router that looks somthing like this:

<Switch>
    <Route path="/" component={Home}/>
    <Route path="/login" component={Login}/>
    <Route path="/profile" component={Profile}/>
</Switch>

Note: If this is not already in its own dedicated component, you will need to extract it into its own one

As this component needs access to the Router, you will need a new component to call this, so create a component that looks like this:

import React from "react";
// The import below should be updated to match your Router component
import Routes from "../Routes";
import DynamicSitemap from "react-dynamic-sitemap";

export default function Sitemap(props) {
	return (
		<DynamicSitemap routes={Routes} prettify={true} {...props}/>
	);
}

Then add a new Route to your Router to serve your sitemap:

<Route path="/sitemap" component={Sitemap}/>

Finally add the following to all of your routes:

Attribute	Accepted Values	Usage
sitemapIndex	true/false (default: false)	If you want the route to appear on the sitemap then set to true
priority	0-1 (default: 0)	Set to a value between 0 and 1, used by search engines
changefreq	always, hourly, daily, weekly, monthly, yearly, never (default: never)	Frequency that the page is changed, used by search engines
slugs	Array of JSON objects to populate slugs with. For the following route: www.example.com/article/:id, in order to populate it with values foo and bar, you will need to pass the value [{id: "foo"}, {id: "bar"}]	For dynamic URLs, to populate the urls, rather than have slugs appear in your sitemap