Question

我的react应用程序在localhost上工作正常，但是当我在gh-pages中部署它或者浪涌之后它不会让我在使用URL的页面之间移动。

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

用户可以通过单击右上角的menuItem进入注册页面。但如果用户使用http://chat.susi.ai/signup/网址，则会显示404页

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

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

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

         HttpWebRequest wr = HttpWebRequest.Create("https://www.fshare.vn/login") as HttpWebRequest;
        wr.KeepAlive = true;

        // get the value
        HttpWebResponse wrep = wr.GetResponse() as HttpWebResponse;
        Stream streamReponse = wrep.GetResponseStream();
        StreamReader reader = new StreamReader(streamReponse);
        string httpDoc = reader.ReadToEnd();
        string fs_csrt = getfs_csrf(httpDoc);

        wr.CookieContainer = new CookieContainer();
        wr.CookieContainer.Add(wrep.Cookies);

        reader.Close();
        streamReponse.Close();
        wrep.Close();


        // Post into website

        string postDataString = @"POST /login fs_csrf={0}
                            &LoginForm%5Bemail%5D=abcd%40yahoo.com.vn
                            &LoginForm%5Bpassword%5D=abcd
                            &LoginForm%5Bcheckloginpopup%5D=0
                            &LoginForm%5BrememberMe%5D=0
                            &yt0=%C4%90%C4%83ng+nh%E1%BA%ADp
                            ";
        postDataString = string.Format(postDataString, fs_csrt);
        MessageBox.Show("I will post: " + postDataString);

        byte[] postDatabyte = Encoding.ASCII.GetBytes(postDataString);



        wr.UserAgent = "Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.84 Safari/537.36";
        wr.Method = "POST";
        wr.Accept = "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8";
        wr.KeepAlive = true;
        wr.ContentType = "application/x-www-form-urlencoded";
        //wr.ContentLength = postDatabyte.Length;

        Stream stream = wr.GetRequestStream();
        stream.Write(postDatabyte, 0, postDatabyte.Length);
        stream.Close();

        // get the result
        HttpWebResponse wrep2 = wr.GetResponse() as HttpWebResponse;
        Stream streamReponse2 = wrep2.GetResponseStream();
        StreamReader reader2 = new StreamReader(streamReponse2);
        string httpDoc2 = reader2.ReadToEnd();

        Clipboard.SetText(httpDoc2);
        MessageBox.Show("Post done");

如果有人可以为我的问题提供示例代码的良好解决方案，那对我来说真的很有用。

Answer 1

这种情况正在发生，因为index.html用户未直接访问这些网址时会引导您的应用。

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

修改：看起来你正在使用create-react-app。当您在本地开发时，这是有效的，因为create-react-app的{{1}}包处理为您的react-scripts提供服务，作为这些请求的后备。

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

Answer 2

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

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

Answer 3

此问题在所有单页应用程序中都会发生（例如React，Angular）。请按照以下步骤解决（仅4次浪涌）：

String
#! /bin/bash sudo apt-get update sudo apt-get -yq install python-pip sudo pip install --upgrade google-cloud sudo pip install --upgrade google-cloud-storage sudo pip install --upgrade google-api-python-client sudo pip install --upgrade google-auth-httplib2 echo "Making directories..." mkdir -p /home/<username>/rawdata mkdir -p /home/<username>/processeddata mkdir -p /home/<username>/input mkdir -p /home/<username>/code mkdir -p /home/<username>/and so on echo "Setting ownership..." sudo chown -R <username> /home/<username> echo "Directory creation complete..." gsutil cp gs://<bucket with code>/* /home/<username>/code/ echo "Boot complete." nohup python /home/<username>/code/workermaster.py &
npm run build
cd build

Answer 4

我有同样的问题。我很容易解决了...：）

我在前端（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))
})

Answer 5

在静态服务器上部署构建时，如果我们会使用在后台使用HTML5 pushState history API的路由器（例如，带有browserHistory的React Router），则为静态文件服务器可能无法加载路线和适当的屏幕，并显示404 - Not Found错误。

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

当为ex的路径/todos/42重新加载页面时，服务器将查找文件build/todos/42，但找不到该文件。需要将服务器配置为通过提供/todos/42
来响应对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 ，则需要在React APP的.htaccess文件夹中创建一个public文件，看起来像这样：

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

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

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在生产和浪涌部署中不起作用

7 个答案: