JavaScript React Router 4 Basics Navigating, Nesting and Redirecting Routes Routing Challenge – Solution

Nothing displaying in Courses page but the navbar

import React from 'react'; import {NavLink, Route} from 'react-router-dom';

import CSS from './courses/CSS'; import HTML from './courses/HTML'; import JavaScript from './courses/JavaScript';

const Courses = () => ( <div className="main-content courses"> <div className="course-header group"> <h2>Courses</h2> <ul className="course-nav"> <li><NavLink to='/courses/html'>HTML</NavLink></li> <li><NavLink to='/courses/css'>CSS</NavLink></li> <li><NavLink to='/courses/javascript'>JavaScript</NavLink></li> </ul> </div> <Route path="/courses/html" component={HTML} /> <Route path="/courses/css" component={CSS} /> <Route path="/courses/javascript" component={JavaScript} />

</div> );

export default Courses;

I see an active the Header with the Courses tab active but absolutely nothing is displaying on the page