25

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

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

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

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

这是我的 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')
);

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

4

7 回答 7

25

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

对于浪涌，您可以添加一个200.html包含与您正在部署的内容相同的文件index.html（或只是将其重命名200.html为您的应用程序开始运行。

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

react-scripts用户指南中有关于如何在部署到 GitHub Pages和spray.sh（如上）时处理此问题的部分。

于 2017-06-12T03:59:14.967 回答
22

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

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
于 2018-11-14T06:40:05.850 回答
4

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

  1. npm run build
  2. cd build
  3. cp index.html 200.html
  4. surge
于 2019-08-20T12:52:09.230 回答
3

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

如create-react-app 部署文章中所述：

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

Node因此，为了在使用with时使路由正常工作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的.htaccess文件夹中创建一个文件，如下所示：public

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

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

于 2019-06-13T04:18:06.657 回答
1

我有同样的问题。而且我很容易解决它...... :)

我在前端（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))
})
于 2018-11-28T16:50:22.320 回答
0

我有同样的问题，我通过利用.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得到了这个想法

于 2021-03-31T23:32:53.613 回答
0

只需添加 200.html

200.html里面

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

它完美无缺

于 2021-05-02T11:57:20.450 回答