Reaction: POST and GET not found

I am following this tutorial which I am adapting to React Router v4.

I have these files:

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;

      

        
        
        
      

    

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

      

        
        
        
      

    

As you can see, I did a little "workaround" to make it look nice and it works. But it only works for client side routing.

I cannot reload pages via the f5 button or refresh, nor can I submit the form and receive it via router.post()

. This automatically results in a 404 not found.

I typed req.url

in router.get('*')

to see where the thing is dropping and it seems like everywhere I go, the server is still getting the address /

. I believe it's the tag <Link to>

.

How can I fix this and force the server to "follow" client-side routing?

I am using the latest versions of Express, React and React-Router. thanks in advance

EDIT: Edited based on comments made by VivekN