Javascript 反应：发布并找不到

我遵循我适应的反应路由器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;

从“React”导入React；
从“道具类型”导入道具类型；
从'react router dom'导入{Link，NavLink}；
常量基=（{child}）=>(
反应应用程序
登录
{child.render（）}
);
Base.propTypes={
子项：PropTypes.object.isRequired
};
导出默认基；

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

从“React”导入React；
从“react dom”导入react dom；
从“react-tap事件插件”导入injectTapEventPlugin；
从“材质ui/styles/GetMuiteme”导入GetMuiteme；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“react router dom”导入{BrowserRouter，Switch，Route}；
从“/components/Base.jsx”导入Base；
从“./components/HomePage.jsx”导入主页；
从“/components/LoginPag.jsx”导入LoginPag；
//让MaterialUI正常工作
injectTapEventPlugin（）；
const TestLogin=（道具）=>{
返回（）
};
const TestBase=（道具）=>{
返回（）
};
ReactDom.render((
)，document.getElementById（'react-app'）；

正如您所看到的，我做了一些“变通”，使所有内容都呈现得很好，并且效果良好。但它只适用于客户端路由

我无法通过f5或刷新按钮重新加载页面，也无法发送表单并通过

router.post（）

获取表单。它会自动导致找不到404

我在路由器中打印了

req.url

。获取（“*”）以查看事情发生在哪里，似乎无论我走到哪里，服务器都会收到地址

/

。我相信问题出在

标签上

如何修复此问题并使服务器“遵循”客户端路由

我正在使用最新版本的Express、React和React路由器。提前谢谢

---

编辑：根据VivekN的评论进行编辑，将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);

---

您尚未为相同的路由定义任何服务器端路由。这正是问题所在。我声明了一个用于登录的post路由，甚至是一个用于登录的get路由（例如，

router.get（'login'）

），但服务器从未执行过。因为我收到的每个请求都来自url“/”。您的/login路由应该位于*路由之上，以便它接收请求。根据您的评论，我修改了auth.js，但服务器仍然处理“/”路径，因为他不知道我在/login”，因为客户端路由。它是否在auth.js中输入了/route？