React-router-dom not working

I've been following along with this video on ReactTraining.com to set up react-router-dom in my app.

Seems like everything is set up as intended and yet when I click on the different NavLinks, the content of my app doesn't change for some reason.

If I stub {Sky} for any of other other components (HQ and Settings) in that first Route path, they render properly. I know that the files are loading in correctly. I'm not sure why the content isn't changing however.

In my dependencies, I have "react-router-dom": "^4.1.1", installed.

I'm not sure what I'm doing wrong, any help would be appreciated. Thanks!

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { BrowserRouter as Router, Switch, Route, NavLink } from 'react-router-dom';

import Sky from './sky';
import HQ from './hq';
import Settings from './settings';

class Home extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Router>
                <section className="main-content">
                    <div className="menu-bar">
                        <NavLink to='/'>
                            <span className="logo" />
                        </NavLink>

                        <div className="nav">
                            <NavLink to='/'>Sky</NavLink>
                            <NavLink to='/hq'>HQ</NavLink>
                            <NavLink to='/settings'>Settings</NavLink>
                        </div>
                    </div>

                    <Switch>
                        <Route path='/' component={Sky} />
                        <Route path='/hq' component={HQ} />
                        <Route path='/settings' component={Settings} />
                    </Switch>
                </section>
            </Router>
        );
    }
};

Edit: Occasionally this 404 shows up in my console:

Failed to load resource: the server responded with a status of 404 (Not Found)

It's referring mostly to hq.js but sometimes to settings.js. Both are in the same directory as Sky which is loading in just fine

Both HQ and Settings are very simple files (replace HQ with Settings and you have the Settings file)

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class HQ extends Component {
    render() {
        return (
            <div className='hq'>
                <h1>Welcome to HQ</h1>
            </div>
        );
    }
}

export default HQ;