如果刷新页面，则找不到 React Router URL - 创建 React App答案

【问题标题】：React Router URL not found if refresh page - Create React App如果刷新页面，则找不到 React Router URL - 创建 React App
【发布时间】：2020-04-09 14:33:51
【问题描述】：

我有一个包含不同页面 (ROUTER) 的 React 应用程序。我可以从一个页面转到另一个页面，刷新页面，并且在本地一切正常。

如果我一直部署应用程序 npm run built 并将其上传到我的主机 infinityfree.net，我想刷新页面或使用直接链接，我会收到 404 错误。

我尝试捕获所有路线，但它不起作用

class App extends React.Component {
  render() {
    return (
      <Router>
        <div className="container">
          <ul>
            <li><Link to="/">Main</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/SomethingElse">Something else</Link></li>
          </ul>
          <hr />
          <Switch>
            <Route exact path="/" component={Main} />
            <Route path="/about" component={About} />
            <Route path="/SomethingElse" component={SomethingElse} />
          </Switch>
        </div>
      </Router>
    );
  }
}

有什么建议吗？谢谢！

【问题讨论】：

你能告诉我们你尝试过的所有路线吗？
请指定您是使用节点应用服务器来为您的应用提供服务，还是仅使用 Web 服务器来返回您的 js 文件；如果您使用的是节点，请向我们展示服务器配置
您如何托管您的应用程序？
我运行 npm run built 并将文件复制并粘贴到我的文件管理器区域 infinityfree.net

标签： javascript reactjs react-router create-react-app

【解决方案1】：

一旦您在不同的路由中刷新页面，您的 http 服务器将无法获取与该路由对应的文件，因为它不存在

所以你必须将所有路由重定向到index.html，这是你的应用程序的根目录

因此，如果您使用的是 apache，则可以将 .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>

【讨论】：

遇到了和OP类似的问题，谢谢你的回复，对我也有帮助，干杯！

【解决方案2】：

您需要将主机设置为始终让路由做出反应。搜索X routing config for react，看你用什么X可以是Apache、Nginx等等。

【讨论】：

【解决方案3】：

当我将我的 react 应用程序解压到 netlify 时，这发生在我身上。您需要包含一个名为 _redirects 的文件，其中包含以下行：

/* /index.html 200

运行部署脚本后将此文件添加到构建文件夹，然后上传！

【讨论】：

【解决方案4】：

您可能没有正确配置您的主机。

当您访问mypage.example.com/ 时，服务器将为您提供文件index.html，这是显示您的应用程序的文件。但是，如果您尝试访问 mypage.example.com/about，服务器将尝试查找 about 文件夹并失败，从而给您一个 404 错误。

如果 url 不是真实文件，您应该将服务器配置为始终为您提供 index.html。

以下是您可以为 Apache 执行此操作的方法：https://stackoverflow.com/a/45723487

【讨论】：

【解决方案5】：

Htaccess 文件。还有很多其他的事情需要考虑，但这是我的网站 htaccess 配置：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
AddType x-httpd-php7 .php

不过，完全取决于您的服务器/部署！

【讨论】：