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

1 Answer

Anthony Albertorio
Anthony Albertorio
19,341 Points

Format your code please. See the markdown cheatsheet. Hint put code in between the code. Then after the first place the language like js.

// some code