React-router-dom not working

Question

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;

Solution

The Switch component chose the first one route, that matches the URL path. You have three routes to go: /, /hq, /settings. When you address to / Switch component looks at the first (upper) route in the list and checks if it matches criteria. So the first / route matches and we proceed to the 'Sky' comp.

Now when you address /hq Switch component looks at the first (upper) route as before. Does it match? YES The first route / matches /hq thats why we still on 'Sky' page.

To prevent such behavior use exact attribute on Route component. Like this:

<Switch>
  <Route exact path='/' component={Sky} />
  <Route exact path='/hq' component={HQ} />
  <Route exact path='/settings' component={Settings} />
</Switch>

404 error probably about unexisted favicon icon...