提问者:小点点

如何为机器人服务。txt和站点地图。firebase中的xml托管创建带有react路由器的react应用程序


我试图在我的网站的根部服务robots.txt和sitemap.xml,如www.fakedomain.com/robots.txt.我下面描述的设置似乎在localhost工作,但不是在托管生产。托管产品返回空白页。

使用firebase托管、创建react应用程序和react路由器进行url处理

当前设置模拟:如何使用React与Firebase托管在SPA上robots.txt?

文件夹结构:公共/robots.txt公共/sitemap.xml

TopApp。js

import React, { Component } from 'react';
import {
  Switch,
  Route,
  Redirect,
} from 'react-router-dom';

import App from './App';

class TopApp extends Component {
  constructor(props) {
    super(props);

    this.state = {
    };

  }

  render() {

    return (
      <Switch>
        <Route exact path="/" render={() => (<Redirect to={"/app"}/>)}/>
        <Route path={"/app"} component={() => <App />} />
      </Switch>
    )

  }

}

export default (TopApp);

/src/index。js

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter,
} from 'react-router-dom';
import TopApp from './components/TopApp';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    <BrowserRouter>
        <TopApp/>
    </BrowserRouter>,
    document.getElementById('root')
);

registerServiceWorker();

共1个答案

匿名用户

它看起来像您的Firebase公共目录,没有指向react-create-app生产/build目录。

您可以尝试将Firebase公用配置更改为:

"hosting": {
  "public": "build"
}

或者您也可以尝试从头开始,但请遵循我的说明以及在Firebase中构建和部署react create app的关键步骤:

>

  • 首先,为了在react-create-app中拥有公共资产(robots.txt,sitemap.xml等),您必须将该资产放在您的/Public目录中。

    react-create-app的文档是这样说的:

    如果将文件放入公用文件夹,则Webpack不会处理该文件。相反,它将原封不动地复制到构建文件夹中。

    为了构建用于生产的应用程序,您将执行npm运行构建纱线构建。这将与您的机器人一起将应用程序构建到/build文件夹中。txt和站点地图。xml文件。

    下一步是使用Firebase init初始化Firebase,并选择Firebase主机设置。

    这是最重要的部分,也是我认为问题所在。默认情况下,Firebase公用目录为/public。但在我们的react create应用程序案例中,我们的生产文件位于/build中。因此,您必须手动将其更改为/build

    稍后Firebase会询问您是否希望将应用配置为单页应用。

    1. 键入y并按enter键。接受此选项后,您将能够使用react router dom在应用程序中导航
    2. 它将显示文件构建/索引。html已经存在。覆盖?按N-因为我们已经从react create应用程序中获得了它

    最后一步是使用firebase deploy部署项目。

    如何将创建响应应用部署到Firebase的作者的学分。