部署 - React 在我刷新页面时显示 "Cannot Get"

Question

我用服务器和数据库部署了我的反应应用程序：https://www.mon-gouvernement.fr/

我使用 axios 获取并 post 我的数据到我的数据库中。我使用 sequelize 来管理我的数据库。

App.js

<BrowserRouter>
        {/* appBar position */}
        <ResponsiveAppBar />

        <Container component="main" maxWidth="md">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/a-propos" element={<About />} />
            <Route path="/creer-son-gouvernement" element={<CreateGovernment />} />
            <Route path="/gouvernement-galerie" element={<GovernmentWall />} />
            <Route path="/gouvernement/:id" element={<GovernmentId />} />
            <Route path="*" element={<Error404 />} />
          </Routes>
        </Container>
        <Footer />
      </BrowserRouter>

Server.js

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

app.use(express.json());
app.use(cors());

const db = require('./models');


const governmentCreateRouter = require('./routes/GovernmentCreate');
app.use("/governmentCreate", governmentCreateRouter);


db.sequelize.sync().then(() => {
    app.listen();
});

政府-galerie.js

useEffect(() => {

        axios.get(`https://www.mon-gouvernement.fr/GovernmentCreate`)
            .then((res) => {
                console.log(res.data);

                setGovernmentList(res.data);

            }).catch((err) => {
                console.log(err);
            });
    }, []);

一切正常，直到我尝试刷新我的页面 gouvernement-galerie.js。当我这样做时，我的页面显示：Cannot GET /gouvernement-galerie.

在 Whosebug 上搜索了很久之后，我发现如果我在我的 .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>

但不幸的是，这并没有改变什么。是的，我的页面停止显示无法获取，但 axios.get() return 什么也没有，我的页面保持空白。

你能帮我解决这个问题吗？

Answer 1

好的，我的问题解决了。

我将 front-end 文件 build 放在服务器端，然后在 server.js

上添加一些代码

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

app.use(express.json());
app.use(cors());

const db = require('./models');


//************************************************
// ROUTES
//************************************************
const governmentCreateRouter = require('./routes/GovernmentCreate');
app.use("/governmentCreate", governmentCreateRouter);


app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});


//************************************************
// CONNECTION TO DATABASE
//************************************************
db.sequelize.sync().then(() => {
    app.listen();
});

我也添加到我的package.json这一行

"homepage": "https://www.mon-gouvernement.fr/",

部署 - React 在我刷新页面时显示 "Cannot Get"

Deploy - React show me "Cannot Get" when I refresh my page

sequelize.js

reactjs

react-router

react-router-dom