首页 > 解决方案 > 在新选项卡中打开时显示“404 page not found”错误的 React 应用程序

问题描述

已将 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>

标签: javascripthtmlreactjs

解决方案


根文件夹中包含以下代码的 .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>

推荐阅读