React Router 4

react-router4.js

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

// Components
import App from './components/App';
import Home from './components/Home';
import About from './components/About';
import Teachers from './components/Teachers';
import Courses from './components/Courses';

// Components -- Courses
import HTML from './components/courses/HTML';
import CSS from './components/courses/CSS';
import JavaScript from './components/courses/JavaScript';

// Routes
// contain all routes into a variable to be imported into index.js
const routes = (
    <Router>
        {/* If path is / then load the Home component */}
        <App>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/about" component={About} />
                <Route path="/teachers" component={Teachers} />
                <Courses>
                    <Route path="/courses/html" component={HTML} />
                    <Route path="/courses/css" component={CSS} />
                    <Route path="/courses/javascript" component={JavaScript} />
                </Courses>
            </Switch>
        </App>
    </Router>
);

export default routes;