反应：未找到 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');
});

您的代码的问题在于，当请求到达路径中有 /login 的服务器时，您已经编写了代码，那么它应该进入 auth.js 文件，并且您应该在其中检查 router.post('/ '） 方法。 要么这个，要么你把 index.js 文件改成

app.use('/', authRoutes);