使用 reactjs 和 nodejs 重定向不起作用

Question

我正在創建一個登錄系統，前端使用 React，后端使用 Express。 我已經創建了主頁、登錄和注冊頁面，當我在本地運行應用程序時它工作正常，但是當我將它上傳到 Heroku 時它會中斷，例如：

如果我把這個“http://localhost:3000/Register”放在瀏覽器中，注冊頁面加載正常，但是當我在 heroku 的應用程序中做同樣的事情時，就像這樣“https://twitterweb2.herokuapp.com/Register”然后它壞了，它沒有加載，我收到“Cannot GET /Register”消息。 我很清楚我可以在服務器端處理這個問題，它確實可以工作，但為什么現在不能工作？

這是我的反應代碼：

 import React from 'react'; import { BrowserRouter, Route } from "react-router-dom"; import Home from './pages/Home/Home'; import Raiz from './pages/Raiz/Raiz'; import Login from './pages/Login/Login'; import Register from './pages/Register/Register'; import './App.css'; function App() { return ( <BrowserRouter> <Route exact path="/" component={Raiz} /> <Route exact path="/Register" component={Register} /> <Route exact path="/Login" component={Login} /> <Route exact path="/Home" component={Home} /> </BrowserRouter> ); }; export default App;

這是我的服務器代碼：

 var express = require('express') const bcrypt = require('bcrypt') const { Client } = require('pg') const { response } = require('express') var app = express() const connectionData = { user: 'postgres', host: 'localhost', database: 'dblocal', password: '123456', port: 5432, } const client = new Client(connectionData) client.connect() const port = 3030; app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`) }) app.use(express.static('public')); app.use(function(req, res, next) { res.setHeader("Access-Control-Allow-Origin", "*"); res.setHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,DELETE"); res.setHeader("Access-Control-Allow-Headers", "X-Requested-With, Access-Control-Allow-Headers, Content-Type, Authorization, Origin, Accept"); next(); }); app.use(express.json()); app.post('/pages/Register', async (request, responsee) => { const hashedPassword = await bcrypt.hash(request.body.password, 10); console.log(hashedPassword); const data = request.body; client.query("select * from usuario where correo = '" + data.email + "'").then(response => { if (response.rowCount>=1) { responsee.json({ status: 'user already exists' }); } else ( client.query("insert into usuario (nombre, apellido, correo, usuario, passwordd) values ('"+data.name+"', '"+data.lastname+"', '"+data.email+"', '"+data.username+"', '"+hashedPassword+"')").then(response => { responsee.json({ status: 'user successfully created' }) }).catch(err => { console.log("se ha creado exitosamente"); }) ) }).catch(err => { }) }); app.post('/pages/Login', async (req, res) => { const hp = await bcrypt.hash(req.body.password, 10); client.query("select * from usuario where correo = '" + req.body.email + "'").then (async response => { if (response.rowCount>=1) { if (await bcrypt.compare(req.body.password, response.rows[0].passwordd)) res.json({ status: 'success' }); else res.json({ status: 'fail' }); } }); });

Answer 1

這可能會完成這項工作：

app.get('*', (req,res) => {
  // just send the index.html file and point to its location :)
  res.sendFile(path.join(__dirname, 'public', 'index.html'))
})

請注意，此入口點必須位於所有 API 資源之后。