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'));

正如你所看到的，我做了一些＆＃34;解决方法＆＃34;让一切都很好地呈现，它的工作原理。但它仅适用于客户端路由。

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

我在req.url打印router.get('*')以查看事情发生的位置，看来无论我走到哪里，服务器仍会收到地址/。我认为问题在于<Link to>标签..

如何解决此问题并获取服务器＆＃34;关注＆＃34;客户端路由？

我使用的是最新版本的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（＆＃ 39; /＆＃39;）方法。要么是这个，要么将index.js文件更改为

app.use('/', authRoutes);

React：找不到POST和GET

1 个答案: