如何在 react 应用程序中添加 sitemap.xml 并将其公开？答案

【问题标题】：Ho do I add sitemap.xml in a react app and make it public?如何在 react 应用程序中添加 sitemap.xml 并将其公开？
【发布时间】：2019-11-04 13:56:29
【问题描述】：

我在/public 文件夹中的文件中有一个 sitemap.xml，我想将其公开，以便 Google 可以从 www.my_domain.com/sitemap.xml 读取它。我该怎么做？

编辑我已经接管了这个项目，但我不知道这种设置。这就是我现在所拥有的。

// Set up the router, wrapping all Routes in the App component
import App from 'containers/App';
import createRoutes, { createIndexRoute } from './routes';

const rootRoute = {
  path: '/(en)(pl)(de)(bg)(cz)(ee)(gr)(hr)(hu)(it)(lt)(lv)(ro)(si)(sk)',
  component: App,
  childRoutes: createRoutes(store),
  indexRoute: createIndexRoute(store),
};

const render = (translatedMessages) => {
  ReactDOM.render(
    <Provider store={store}>
      <LanguageProvider messages={translatedMessages}>
        <Router
          history={history}
          routes={rootRoute}
          render={applyRouterMiddleware(
            useScroll(
              (prevRouterProps, { location }) =>
                prevRouterProps && location.pathname !== prevRouterProps.location.pathname
            )
          )}
        />
      </LanguageProvider>
    </Provider>,
    document.getElementById('app')
  );
};

每条路线都是这样的

###routes.js
export default function createRoutes(store) {
  // Create reusable async injectors using getAsyncInjectors factory
  const { injectReducer, injectSagas } = getAsyncInjectors(store);

  return [
    {
      path: '/home',
      name: 'home',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          System.import('containers/HomePage/reducer'),
          System.import('containers/HomePage/sagas'),
          System.import('containers/HomePage'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([reducer, sagas, component]) => {
          injectReducer('home', reducer.default);
          injectSagas(sagas.default);

          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    }
  ]
}

我只想要一条到/sitemap.xml的路线

【问题讨论】：

确保您的public 文件夹部署在应用的根目录下？
但是当我尝试在本地访问它时，我得到一个空白页和控制台中的错误Warning: [react-router] Location "/sitemap.xml" did not match any routes
您可能需要在问题中添加可操作的信息，例如所有内容的路由方式等。

标签： reactjs xml-sitemap

【解决方案1】：

我通过将 xml 添加到我的服务器重写规则来解决。

原来是</^((?!\.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>

更新为</^((?!\.(css|gif|ico|jpg|js|png|txt|svg|woff|xml|ttf)$).)*$/>

当我访问 /sitemap.xml 时，我现在可以看到站点地图在它显示页面未找到路线之前的位置。

【讨论】：