React：POSTとGETが見つかりません

Question

私はReact Router v4に適応するthis tutorialに従っています。

私はこれらのファイルを持っている：

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が見つかりません。

req.urlにはrouter.get('*')が表示され、どこに行くのが見え、どこに行くかわかりますが、サーバはまだアドレス/を受け取ります。私は問題が<Link to>タグであると信じています。

これを修正してサーバーをクライアントサイドルーティングに「追従させる」方法を教えてください。

私はExpress、React、およびReact-Routerの最新バージョンを使用しています。事前のおかげで

EDIT：1の下にあなたのindex.jsファイルを変更して、アカウントにVivekN

Answer 1

による発言を取るように編集は： -

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