CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
Suhail Kakar
Suhail Kakar

Reputation: 326

How to generate a sitemap dynamically in React JS

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}
/>

Upvotes: 9

Views: 13957

Answers (2)

MahanteshGowda Patil
MahanteshGowda Patil

Reputation: 141

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

Upvotes: 0

thelovekesh
thelovekesh

Reputation: 1452

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

Upvotes: 6

Related Questions