How to generate a sitemap dynamically in React JS

Question

I am using react-router-dom for routing in my react app, There are nearly 5000 pages (which are generated dynamically based on API), now I don't know how can I generate a sitemap for these dynamic pages

Piece of code from my Routes component

<Route
  path={process.env.PUBLIC_URL + '/genres/:name'}
  exact
  component={MovieGenre}
/>
<Route
  path={process.env.PUBLIC_URL + '/discover/:name'}
  exact
  component={DiscoverMovies}
/>
<Route
  path={process.env.PUBLIC_URL + '/find/:query'}
  exact
  component={SearchPage}
/>
<Route
  path={process.env.PUBLIC_URL + '/moviesdetail/:id'}
  exact
  component={MovieScrees}
/>

score 6 · Accepted Answer · answered Jun 24 '21 at 05:13

6

You can use react-router-sitemap to generate a sitemap.xml file for your React application.

Package:

npm i --save react-router-sitemap

Package link - https://www.npmjs.com/package/react-router-sitemap

If you want to implement this in your app then grab all code from here

answered Jun 24 '21 at 05:13

thelovekesh

1,364
1
8
22

Can u help me how to use react-router-sitemap with "@babel/core": "^7.13.10" ? – Goran_Ilic_Ilke Sep 28 '21 at 16:35
1

`react-router-sitemap` doesn't work with the latest versions of React. You can use `react-router-sitemap-maker` – Anton Kondrashov Dec 05 '22 at 22:17

score 0 · Answer 2 · answered Jun 24 '21 at 06:56

When we say dynamic routing, we mean routing that takes place as your app is rendering, not in a configuration or convention outside of a running app. that means almost everything is a component in react-router.

First, grab yourself a Router component for the environment you’re targeting and render it at the top of your app.
Next, grab the link component to link to a new location:
Finally, render a Route to show some UI when the user visits /dashboard.

   // react-dom (what we'll use here)
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  el
);
Next, grab the link component to link to a new location:const App = () => (
  <div>
    <nav>
      <Link to="/dashboard">Dashboard</Link>
    </nav>
  </div>
);
Finally, render a Route to show some UI when the user visits /dashboard.const App = () => (
  <div>
    <nav>
      <Link to="/dashboard">Dashboard</Link>
    </nav>
    <div>
      <Route path="/dashboard" component={Dashboard} />
    </div>
  </div>
);

**In this blog author explained in an easy waylink **

Solution 2

There are some npm packages which will handle sitemap

How to generate a sitemap dynamically in React JS

2 Answers2

Package: