反应：POST和GET未找到

Question

我跟随this tutorial，我适应了React Router v4。

我有这些文件：

auth.js

const express = require('express'); 
const validator = require('validator'); 

const router = new express.Router(); 

function validateLoginForm(payload) { 
    const errors = {}; 
    let isFormValid = true; 
    let message = ''; 

    if (!payload || typeof payload.email !== 'string' || payload.email.trim().length === 0) { 
     isFormValid = false; 
     errors.email = 'Please provide your email address.'; 
    } 

    if (!payload || typeof payload.password !== 'string' || payload.password.trim().length === 0) { 
     isFormValid = false; 
     errors.password = 'Please provide your password.'; 
    } 

    if (!isFormValid) { 
     message = 'Check the form for errors.'; 
    } 

    return { 
     success: isFormValid, 
     message, 
     errors 
    }; 
} 

router.post('/login', (req, res) => { 
    console.log("lol"); 
    const validationResult = validateLoginForm(req.body); 
    if (!validationResult.success) { 
     return res.status(400).json({ 
      success: false, 
      message: validationResult.message, 
      errors: validationResult.errors 
     }); 
    } 

    return res.status(200).end(); 
}); 


router.get('/login', (req, res) => { 
    console.log(req.url); 
}); 

router.get('/', (req, res) => { 
    console.log(req.url); 
    console.log("lmao") 
}); 


module.exports = router; 

index.js

const express = require('express'); 
const bodyParser = require('body-parser'); 
const app = express(); 
const router = new express.Router(); 
// tell the app to look for static files in these directories 
app.use(express.static('./server/static/')); 
app.use(express.static('./client/dist/')); 
app.use(bodyParser.urlencoded({extended:false})); 

const authRoutes = require('./server/routes/auth'); 

app.use('/login', authRoutes); 

// start the server 
app.listen(3000,() => { 
    console.log('Server is running on http://localhost:3000 or http://127.0.0.1:3000'); 
}); 

Base.jsx

import React from 'react'; 
import PropTypes from 'prop-types'; 
import { Link, NavLink } from 'react-router-dom'; 

const Base = ({ child }) => (
    <div> 
     <div className="top-bar"> 
      <div className="top-bar-left"> 
       <NavLink to="/">React App</NavLink> 
      </div> 

      <div className="top-bar-right"> 
       <Link to="/login">Log in</Link> 
      </div> 

     </div> 

     {child.render()} 

    </div> 
); 

Base.propTypes = { 
    child: PropTypes.object.isRequired 
}; 
export default Base; 

和app.jsx

import React from 'react'; 
import ReactDom from 'react-dom'; 
import injectTapEventPlugin from 'react-tap-event-plugin'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import {BrowserRouter, Switch, Route} from 'react-router-dom'; 
import Base from './components/Base.jsx'; 
import HomePage from './components/HomePage.jsx'; 
import LoginPag from './components/LoginPag.jsx'; 

// for MaterialUI to work properly 
injectTapEventPlugin(); 

const TestLogin = (props) => { 
    return (<Base child={LoginPag}/>) 
}; 

const TestBase = (props) => { 
    return(<Base child={HomePage}/>) 
}; 

ReactDom.render((<BrowserRouter><MuiThemeProvider muiTheme={getMuiTheme()}> 
    <div> 
    <Switch> 
      <Route exact path="/" component={TestBase}/> 
    </Switch> 
    <Route exact path="/login" component={TestLogin}/> 
    </div> 
    </MuiThemeProvider> 
</BrowserRouter>), document.getElementById('react-app')); 

正如你所看到的，我做了一点“解决方法”，让一切都很好地呈现并且工作。但它只适用于客户端路由。

我无法通过f5或刷新按钮重新加载页面，也无法发送表单并通过router.post()获取。它会自动导致找不到404。

我在router.get('*')的地方打印了req.url，看看事情发生了什么地方，看起来无论我走到哪里，服务器仍然收到地址/。我相信这件事是<Link to>标签..

我该如何解决这个问题，并得到服务器“跟随”客户端路由？

我正在使用最新版本的Express，React和React-Router。在此先感谢

编辑：编辑，以考虑到VivekN

Answer 1

的言论更改您的index.js文件到以下之一： -

const express = require('express'); 
const bodyParser = require('body-parser'); 
const app = express(); 
const router = new express.Router(); 
// tell the app to look for static files in these directories 
app.use(express.static('./server/static/')); 
app.use(express.static('./client/dist/')); 
app.use(bodyParser.urlencoded({extended:false})); 

const authRoutes = require('./server/routes/auth'); 

app.use('/', authRoutes); 

// start the server 
app.listen(3000,() => { 
    console.log('Server is running on http://localhost:3000 or http://127.0.0.1:3000'); 
}); 

与您的代码的问题是，你当请求到达你的服务器并且在其路径中有登录时写入，那么它应该在auth.js文件里面，在里面你应该检查router.post（'/'）方法。 这个或更改index.js文件是

app.use('/', authRoutes);