通过简单的ReactJS FORM发布到ExpressJS服务器，不断出现错误

Question

我是ReactJS的新手，正在尝试找到一种将React前端连接到ExpressJS后端的方法。要做到这一点，我只需要设置一个简单的表单，在按下表单中的注册按钮后发送POST请求

问题是我一直在控制台中收到这些错误消息。这些是的错误

POST http://localhost:3000/api/users 404 (Not Found)
Error: Request failed with status code 404
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.onloadend (xhr.js:66)

这是反应代码

import Proj from './Proj'
import React, {Fragment, useState} from 'react'
import axios from 'axios';

export const Homepage = () => {
const [formData, setFormData] = useState({
name:'',

});
const { name } = formData;
const onChange = e =>
setFormData({...formData, [e.target.name]:e.target.value})
const onSubmit = async e => {
console.log('submitted')
e.preventDefault();
const newUser = {
name,

}
try {
const config = {
headers:{
'Content-Type':'application/json'
} }
const body = JSON.stringify(newUser)
const res = await axios.post('/api/users',body, config)             
console.log(res)
} catch (err) {
console.error(err)
}
}

return (
<div className="Landing">
<Proj/>
<section>
<form  onSubmit = {e=>onSubmit(e)}>
<input 
type="text" 
placeholder="Name" 
name="name"
value = {name}
onChange = {e =>onChange(e)}
required />   
<input type="submit" className="btn btn-primary" value="Register" />
<h1>Contact</h1>

</form>


</section>

</div>
)
}
export default Homepage

此App.js

import { Navbar } from './components/Navbar';
import Homepage from './components/Homepage';
import Projects from './components/Projects';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import './App.css';
function App() {
return (
<Router>
<div className="App">
<Navbar/>

</div>
<Route exact path="/" component={Homepage} />
<Switch>
<Route exact path="/Projects" component={Projects} />
</Switch>
</Router>
);
}
export default App;

这是我的服务器端JS

const express = require ('express')
const path = require('path');
const app = express()
app.use(express.urlencoded({extended: false})); 

app.use('/', require('./routes/api/users'))
// Serve static assets in production
if (process.env.NODE_ENV === 'production'){
app.use(express.static('client/build'))
app.get('*', (req,res)=>{
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'))

})
}

const PORT = 5000
app.listen(process.env.PORT || 5000)

这是routes 中api文件夹中的users.js

const express = require('express')
const router = express.Router();

router.post('/', async (req,res)=>
{
console.log('its  working, and here is the data', req.body)

})

module.exports = router;

客户端包.json

"proxy":"http://localhost:5000",

如果有人能告诉我我做错了什么，或者有更好的方法做事，我会非常感激。谢谢

Answer 1

而不是

app.use('/', require('./routes/api/users'))

中的类型

app.use('/api/users', require('./routes/api/users'))

您当前正在过帐到不存在的路线。