Question

我有一个带有不同页面的React应用（ROUTER）。我可以从一个页面转到另一个页面，刷新页面，然后在本地一切正常。

如果我部署应用程序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>
    );
  }
}

有什么提示吗？谢谢！

Answer 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>

Answer 2

您需要将主机设置为始终离开路由以进行响应。搜索X routing config for react，具体取决于您使用的X可以是Apache，Nginx等。

Answer 3

当我取消部署我的React应用进行netlify时，这发生在我身上。您需要包含一个名为_redirects的文件，其中包含以下行：

/* /index.html 200

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

Answer 4

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

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

您应该做的是将服务器配置为在URL不是真实文件的情况下始终为您提供index.html。

您可以在Apache上执行以下操作：https://stackoverflow.com/a/45723487

Answer 5

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

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

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

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

5 个答案: