如何将Create React App部署到Hostinger并解决子页面无法访问问题

这是单页应用客户端路由的典型部署问题，你使用的BrowserRouter模式依赖服务器层面的路由回退配置，Hostinger默认没有配置该规则，所以直接访问子路由时会返回404。本地开发环境和Firebase默认内置了SPA路由回退规则，所以运行正常。

• 第一步：在你项目的public目录下新建名为.htaccess的配置文件，填入以下内容：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

如果你的项目部署在站点子目录而非根目录，将上述代码中的RewriteBase /修改为对应子目录路径即可，比如部署在/demo目录下就改为RewriteBase /demo/。

• 第二步：重新运行npm run build命令打包项目，新生成的build目录会自动包含刚才添加的.htaccess文件
• 第三步：将新的build目录下所有文件上传到Hostinger对应站点目录，覆盖原有文件后配置即可生效。

如果你不想修改服务器配置，也可以将项目路由组件从BrowserRouter替换为HashRouter，该模式使用URL哈希值实现前端路由，不需要服务器额外配置，缺点是所有页面URL都会带上/#/前缀，美观度和SEO友好度较低。

内容的提问来源于stack exchange，提问作者clarkf