react-router 在生产和浪涌部署中不起作用

Posted 2023-02-21

【中文标题】react-router 在生产和浪涌部署中不起作用

【英文标题】：react-router does not work in production and surge deployments

【发布时间】：2017-11-13 10:37:26

【问题描述】：

我的 react 应用程序在 localhost 上运行良好，但是当我将它部署到 gh-pages 或浪涌后，它不会让我使用 URL 在页面之间移动。

这是项目仓库link 演示网址here

用户可以通过点击右上角的menuItem进入注册页面。但是如果用户使用http://chat.susi.ai/signup/ URL，它会给出 404 页面

我尝试了几种来自互联网的解决方案，但都没有奏效。

下一个问题是：我创建了一个 404 页面，以便在用户尝试移动到损坏的链接时显示出来。它在 localhost 中运行良好。但不在生产中。我尝试了this 解决方案，但没有任何改变。

这是我的 index.js 文件的一部分

const App = () => (
    <Router history=hashHistory>
        <MuiThemeProvider>
            <Switch>
                <Route exact path="/" component=ChatApp />
                <Route exact path="/signup" component=SignUp />
                <Route exact path="/logout" component=Logout />
                <Route exact path="/forgotpwd" component=ForgotPassword />
                <Route exact path="*" component=NotFound />

            </Switch>
        </MuiThemeProvider>
    </Router>
);

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

如果有人可以用示例代码为我的问题提出好的解决方案，这对我真的很有帮助。

【参考方案1】：

只需添加 200.html

200.html内

<script src="path of your App.js"></script>

效果很好

【参考方案2】：

我遇到了同样的问题，我利用.htaccess 文件解决了这个问题。 我添加了一个返回到 index.html 的重定向，它确实保留了 url 路径并且一切正常。

我的.htaccess 文件只有这一行ErrorDocument 404 /index.html 它必须在根目录上，如果不存在则创建它或覆盖现有的。 我建议您在应用程序中处理 404。

我从https://medium.com/designer-recipes/how-to-make-a-custom-404-error-page-for-your-website-1af37a8b20d1得到这个想法

【参考方案3】：

我遇到了同样的问题。而且我很容易就解决了... :)

我在前端（Create-React-App）和快速后端使用了 react。 在开发模式下，一切都很好，但是当我切换到生产版本时，我的反应路由中出现了一些路由问题。经过长时间的调查，我发现问题出在服务器端提供 index.html 文件。

它应该在所有服务器端路由之后，但在所有 app.post 处理程序之前。换句话说，以下行应该放在所有app.gets 之后和所有app.posts 之前

// PRODUCTION
App.get('*', (req, res)=>
res.sendFile(path.resolve(where, the, index.html, is))
)

【参考方案4】：

此问题发生在所有单页应用程序（例如 react、angular）上。 按照以下步骤解决（仅 4 个浪涌）：

npm run build cd build cp index.html 200.html surge

【参考方案5】：

在静态服务器上部署构建时，在我们的 React 应用程序中，如果我们使用在底层使用 HTML5 pushState history API 的路由器（例如，带有 browserHistory 的 React 路由器），静态文件服务器可能无法加载路线和相应的屏幕并显示404 - Not Found 错误。

如create-react-appDeployment article中所述：

当路径为 ex:/todos/42 重新加载页面时，服务器会查找文件 build/todos/42 并没有找到它。服务器需要配置为通过服务index.html来响应对/todos/42的请求

因此，当使用Node 和Express 时，要使路由正常工作，可以添加配置服务器index.js 如下：

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

// PATH CONFIGURATION TO RESPOND TO A REQUEST TO STATIC ROUTE REQUEST BY SERVING index.html
app.get('/*', function (req, res) 
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
);

app.listen(5000);
console.log('Server is listening on http://localhost:5000');

如果你使用 Apache HTTP Server，你需要在你的 React APP 的public 文件夹中创建一个.htaccess 文件，如下所示：

Options -MultiViews
RewriteEngine On
RewriteCond %REQUEST_FILENAME !-f
RewriteRule ^ index.html [QSA,L]

当您运行npm run build 时，它将被复制到build 文件夹。

【讨论】：

嗨@Rahul gupta，我正在使用nginx服务器，我应该在哪里添加类似的修复？

【参考方案6】：

在使用 apache 作为构建文件夹中的 Web 服务器的情况下更改 .htaccess 文件对我有用：

Options -MultiViews
RewriteEngine On
RewriteCond %REQUEST_FILENAME !-f
RewriteRule ^ index.html [QSA,L]

【讨论】：

发件人：create-react-app.dev/docs/deployment/…

我们是否将 .htaccess 文件放入 build 文件夹中？

是的。在您的index.html 所在的位置添加.htaccess

【参考方案7】：

发生这种情况是因为用户没有得到index.html，当他们直接访问这些 URL 时，它会引导您的应用程序。

对于激增，您可以 add a 200.html file 包含与您正在部署的 index.html 相同的内容（或将其重命名为 200.html） - 然后将通过用户访问的任何 URL 将其提供给用户'不对应于静态文件，允许您的应用开始运行。

---

编辑：看起来你正在使用create-react-app。这在您在本地开发时有效，因为create-react-app 的react-scripts 包处理为您提供index.html 作为这些请求的后备。

react-scripts user guide 在how to handle this when deploying to GitHub Pages 和surge.sh 上有部分（如上）。

【讨论】：

确实，在访问子路径时提供 index.html 文件可以正常工作:-)

medium.com/superhighfives/…

这个答案对我不起作用，但@NisugaJayawardana 链接可以。