在新选项卡中打开时显示“404 page not found”错误的 React 应用程序答案

【问题标题】：React application showing "404 page not found " error when open in new tab在新选项卡中打开时显示“404 page not found”错误的 React 应用程序
【发布时间】：2020-04-19 15:05:53
【问题描述】：

已将 React 应用程序从我的本地环境迁移到实时服务器，迁移后如果在新选项卡中打开菜单链接，则会引发 404 错误。

网站链接：http://www.plejfitness.com/ 菜单位置：右上角的标题菜单

<ul class="_1xWsKFr _2rbE6TC _2v5bHvx pRZSkbx">
    <li class="_1GxILA2">
        <a aria-current="page" class="_2Vj-OOq _2_HaYMw _1w_OEYg active" href="/">
            Home
        </a>
    </li>
    <li class="_1GxILA2">
        <a class="_2Vj-OOq _2_HaYMw _1w_OEYg" href="/about">
            About Us
        </a>
    </li>
    <li class="_1GxILA2">
        <a class="_2Vj-OOq _2_HaYMw _1w_OEYg" href="/contact-us">
            Join PLEJ Fitness
        </a>
    </li>
    <li class="_1GxILA2">
        <a class="_2Vj-OOq _2_HaYMw _1w_OEYg" href="/location">
            Locations
        </a>
    </li>
    <li class="_1GxILA2">
        <a class="_2Vj-OOq _2_HaYMw _1w_OEYg" href="/careers">
            Careers
        </a>
    </li>
    <li class="_1GxILA2">
        <a class="_2Vj-OOq _2_HaYMw _1w_OEYg" href="/owngym">
            Own A Gym
        </a>
    </li>
    <li class="_1GxILA2">
        <a class="_2Vj-OOq _2_HaYMw _1w_OEYg" href="/gallery">
            Gallery
        </a>
    </li>
    <li class="_1GxILA2">
        <a class="_2Vj-OOq _2_HaYMw _1w_OEYg" href="/contact-us">
            Contact Us
        </a>
    </li>
</ul>

【问题讨论】：

你的 React 代码在哪里？看起来 React-Router 配置不正确。您的网站似乎是一个单页应用程序，因此看起来路由在新标签页中无法正常工作。
在本地有效吗？
是的，它在本地版本上运行良好
您看到的是服务器的 404 页面，而不是您的 React 应用程序。您的服务器未配置为在这些路径上为您的应用提供服务，仅在 /

标签： javascript html reactjs

【解决方案1】：

根文件夹中包含以下代码的 .htaccess 文件已解决此问题

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

【讨论】：