英文:
React routes gets conflicted with express routes
问题
问题是当您访问 http://localhost:5000/api/users 时，您从您的React应用程序收到了404未找到错误。要解决这个问题，您需要确保以下几点：
-
Express路由配置：确保您的Express应用程序在处理
http://localhost:5000/api/users请求时正确配置路由。您已经有一个路由处理/api/users，但是它仅返回一个JSON响应，这是正确的。但是，如果您想在浏览器中访问此URL并在React应用程序中渲染页面，您需要创建一个用于渲染React页面的路由。 -
React Router配置：在React应用程序中，确保您正确配置了React Router，以便它可以处理
http://localhost:5000/api/users请求并渲染相应的组件。您的React Router配置看起来已经处理了根路径/、/login和/register，但如果您想处理/api/users，您需要添加一个适当的Route。
如果您需要更详细的指导，请提供您的Express和React Router配置，以便我可以为您提供更具体的帮助。
英文:
I have the build files (from npm run build) of the react application in the /public folder on my backend folder.
This is what is in my index.js on my backend
const express = require('express')const mysql = require('mysql');const path = require('path')const app = express()app.use(express.static(path.join(__dirname + "/public")))app.use(express.json())const PORT = 5000app.listen(PORT)app.get('/*', function(req, res) {res.sendFile(path.join(__dirname, '/public/index.html'), function(err) {if (err) {res.status(500).send(err)}})})const db = mysql.createConnection({user: "root",host: "localhost",password: "",database: "project_db",});const users =[{ id: 1,name: "Andrew" },{ id: 2, name: "Steve" },{ id: 3, name: "John" },{ id: 4, name: "Michael" },{ id: 5, name: "Christian" }];app.get("/api/users", (req, res) => {res.json(users);})app.post("/api/register", (req, res) => {const username = req.body.username;const password = req.body.password;const email = req.body.email;db.query("INSERT INTO users (name, password, email) VALUES (?, ?, ?)", [username, password, email]);res.send({"message": "account registered","status": 1,});});
App.js on my react app
import { Route, Routes } from 'react-router-dom'import './components/App.css'import Home from './pages/Home'import Login from './pages/Login'import Register from './pages/Register'function App() {return (<><Routes><Route path="/" element={<Home />} /><Route path="/login" element={<Login />} /><Route path="/register" element={<Register />} /><Route path="*" element={ <h1>Not found (404)</h1> } /></Routes></>);}export default App;
My question: When I go to http://localhost:5000/api/users it gets the 404 not found from my react app
How can I fix this problem?
答案1
得分: 1
以下是您要翻译的部分：
List your backend API endpoints before the "*" "endpoint" that returns the React app.
// Backend APIs
app.get("/api/users", (req, res) => {
res.json(users);
})
app.post("/api/register", (req, res) => {
const username = req.body.username;
const password = req.body.password;
const email = req.body.email;
db.query("INSERT INTO users (name, password, email) VALUES (?, ?, ?)", [username, password, email]);
res.send({
"message": "account registered",
"status": 1,
});
});
// Frontend React app routes
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname, '/public/index.html'), function(err) {
if (err) {
res.status(500).send(err)
}
})
});
英文:
List your backend API endpoints before the "*" "endpoint" that returns the React app.
const express = require('express');...// Backend APIsapp.get("/api/users", (req, res) => {res.json(users);})app.post("/api/register", (req, res) => {const username = req.body.username;const password = req.body.password;const email = req.body.email;db.query("INSERT INTO users (name, password, email) VALUES (?, ?, ?)", [username, password, email]);res.send({"message": "account registered","status": 1,});});// Frontend React app routesapp.get('/*', function(req, res) {res.sendFile(path.join(__dirname, '/public/index.html'), function(err) {if (err) {res.status(500).send(err)}})});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论