如何在 React JS 中动态生成站点地图答案

【问题标题】：How to generate a sitemap dynamically in React JS如何在 React JS 中动态生成站点地图
【发布时间】：2021-09-07 14:29:19
【问题描述】：

我在我的 react 应用中使用 react-router-dom 进行路由，有近 5000 个页面（基于 API 动态生成），现在我不知道如何为这些动态页面生成站点地图

我的 Routes 组件中的一段代码

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

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

您可以使用react-router-sitemap 为您的 React 应用程序生成一个 sitemap.xml 文件。

包装：

npm i --save react-router-sitemap

包链接-https://www.npmjs.com/package/react-router-sitemap

如果您想在您的应用中实现此功能，请从 here 获取所有代码

【讨论】：

你能帮我如何使用 react-router-sitemap 和 "@babel/core": "^7.13.10" 吗？

【解决方案2】：

当我们说动态路由时，我们指的是在您的应用呈现时发生的路由，而不是在正在运行的应用之外的配置或约定中。这意味着几乎所有东西都是 react-router 中的一个组件。

首先，为您的目标环境获取一个路由器组件，并将其呈现在您的应用顶部。
接下来，抓取链接组件以链接到新位置：
最后，渲染一个 Route 以在用户访问 /dashboard 时显示一些 UI。

   // 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>
);

**在本篇博文中作者通俗易懂link**

解决方案 2

有一些 npm 包可以处理站点地图

【讨论】：