react-router 在生产和激增部署中不起作用

Question

我的 React 应用程序在本地主机上运行良好，但是当我在 gh-pages 或 surge 中部署它后，它无法让我使用 URL.

在页面之间移动

这是项目回购 link
演示 url here

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

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

下一个问题是：我创建了一个 404 页面以在用户尝试移动到损坏的 links.It 时显示在 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')
);

如果有人可以针对我的问题提出带有示例代码的好的解决方案，那将对我很有帮助。

Answer 1

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

对于 surge，您可以 add a 200.html file 其中包含与您正在部署的 index.html 相同的内容（或者只是将其重命名为 200.html）- 然后将提供给用户在他们访问的任何 URL 处不对应静态文件，允许您的应用启动运行.

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

react-scripts user guide has sections on how to handle this when deploying to GitHub Pages and surge.sh（同上）。

Answer 2

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

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

Answer 3

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

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

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

之前

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

Answer 4

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

如create-react-app中所述 Deployment article:

when there is a fresh page load for a path for ex: /todos/42, the server looks for the file build/todos/42 and does not find it. The server needs to be configured to respond to a request to /todos/42 by serving index.html

因此，为了使路由在使用 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，您需要在您的 public 文件夹中创建一个 .htaccess 文件 React APP 看起来像这样：

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

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

Answer 5

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

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

Answer 6

我有同样的问题，我利用 .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

Answer 7

只需添加 200.html

里面200.html

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

完美运行

react-router 在生产和激增部署中不起作用

react-router does not work in production and surge deployments

javascript

reactjs

react-router

react-router-dom