title: Can't Reload or manually type a page route with react-router & express
body: <p>I'm setting up a single-page App with React router using Express router on the server side (for serving the first index page with the react router and then standing by for API requests). Currently I only have 2 routes: '/' and '/history'</p>
  
  <p>-clicking on "history" link from the home page gets me there without any problems.</p>
  
  <p>-Manually typing "/history" route makes the browser stay on loading forever.</p>
  
  <p>-Reloading the page while being on "/history" makes the browser stay on loading forever.</p>
  
  <p>how can i go about solving this?</p>
  
  <p>I tried rearranging the routes on express, After this I tried setting the app.all('*') method to handle all requests. Finally I tried changing app.all with app.get...,but neither of these help me. </p>
  
  <p>my index.js (for express router):</p>
  
  <pre><code>    /*Express Server*/
      const express = require('express');
      const app = express();
      const morgan = require('morgan');
      const path = require('path');
      const bodyParser = require('body-parser');
  
      const { mongoose } = require('./database');
  
      //settings
      app.set('port', process.env.PORT || 3000);
  
      //middleware
      app.use(morgan('dev'));
      app.use(bodyParser.urlencoded({ extended: true }));
      app.use(bodyParser.json());
  
      //routes
      app.use('/api/month',require('./routes/monthly.routes'));
  
      app.use('/history',require('./routes/history.routes'));
  
      //static files
      app.use(express.static(path.join(__dirname, 'public')))
  
      app.get(async (req,res)=&gt;{
          await res.sendFile(path.join(__dirname, '/public/index'), (err)=&gt; {
          if (err) {
            res.status(500).send(err)
          }
      })
      });
  
      //Start server
      app.listen(app.get('port'), ()=&gt;{
          console.log(`Server listening on ${app.get('port')}`);
      });
  </code></pre>
  
  <p>router part of my app.js (for react router):</p>
  
  <pre><code>    import React, { Component } from 'react';
      import ReactDom from 'react-dom';
      import { BrowserRouter, Route, Switch } from 'react-router-dom';
      import Axios from 'axios';
  
      import Home from './Home'
      import Latest from './Latest'
  
      class App extends Component {
          constructor(props) {
              super(props);
              this.state = {
                  RecentExpenses: [],
                  monthState: null,
                  Total: 0,
                  Today: null
              }
          };
  
          render() {
              return (
                      &lt;BrowserRouter&gt;
                          &lt;Switch&gt;
                              &lt;Route exact path='/' render={(props) =&gt; &lt;Home {...props} Today={this.state.Today} Total={this.state.Total} RecentExpenses={this.state.RecentExpenses} /&gt;}  /&gt;
                              &lt;Route exact path='/history' render={(props) =&gt; &lt;Latest {...props} Recent={this.state.RecentExpenses} month={this.state.monthState} /&gt;} /&gt;
                          &lt;/Switch&gt;
                      &lt;/BrowserRouter&gt;
              )
          }
      }
  
      ReactDom.render(&lt;App/&gt;, document.getElementById('app'));
  </code></pre>
  
  <p>What I expect is to always receive the same file from the server, so react router can take on as the navigation router. but it stays loading forever with this being thrown into the node console:</p>
  
  <pre><code>(node:8756) UnhandledPromiseRejectionWarning: Error: Cannot find module 'html'
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:571:15)
  at Function.Module._load (internal/modules/cjs/loader.js:497:25)
  at Module.require (internal/modules/cjs/loader.js:626:17)
  at require (internal/modules/cjs/helpers.js:20:18)
  </code></pre>