Refreshing page when deployed to Netlify returns empty page

Question

I have deployed a beta version of a create-react-app site to Netlify via GitHub (CD master branch - repo: https://github.com/willstocks-tech/ws-code-react).

When I navigate to the site, everything works perfectly, I can navigate between the Home About & Contact components without any issues.

However, when I refresh the page while viewing one of those components, the page returns completely blank (with a couple of seemingly unrelated errors in the browser console).

Is there something I have missed during my fiddling? Please excuse any newbie errors, this is my first proper go at React!

I have tried creating a netlify.toml file with

[[redirects]]
from = "/*"
to = "/index.html"
status = 200 

I have also created an _redirects file (as suggested), as detailed below.

This is my current setup:

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './layout/App';
import './assets/stylesheets/index.scss';
//import * as serviceWorker from './serviceWorker';

//serviceWorker.unregister();

ReactDOM.render(<App />, document.getElementById('root'));

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navbar from './components/navbar';
import Home from 'layout/views/home';
import About from 'layout/views/about';
import Contact from 'layout/views/contact';
import Footer from './components/footer';


class App extends React.Component {
    constructor() {
        super();
    }
    render() {
        return (
            <Router>
                <div className="app">
                    <Navbar />
                    <div className="view">
                        <Switch>
                            <Route exact path="/" component={ Home }/>
                            <Route path="/about" component={ About }/>
                            <Route path="/contact" component={ Contact }/>
                            <Route render={ () => <h1>404 Error</h1> } />
                        </Switch>
                    </div> {/* view */}
                    <Footer />
                </div> {/* app */}
            </Router>
        );
    }
}

export default App;

With a /public/_redirects file which currently only has:

/*  /index.html  200

I was expecting to be able to send a person a link to say /about or for a person to refresh the page and see the same/updated content, but at the moment they will just see a blank page.

Answer 1

I was a bit of a fool... I forgot to get rid of the .html files in /public!