Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by bnywa
bnywa
1,266 Points

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

3 Answers

Christin Lepson
Christin Lepson
5,743 Points
Christin Lepson
Christin Lepson
5,743 Points

I had a similar problem. Make sure in App.js that you're only specifying the 'exact' property for the home Route only. If you specify 'exact' on the courses Route, then the Courses component will not be rendered when the URL changes to /courses/html

const App = () => (
    <BrowserRouter>
        <div className="container">
            <Header />
            <Route exact path='/' component={Home}/>
            <Route path='/about' component={About} />
            <Route path='/teachers' component={Teachers} />
            <Route path='/courses' componenet={Courses}/>
        </div>
    </BrowserRouter>
);
Gadi Lehmann
Gadi Lehmann
3,597 Points

Thank you. That solved it for me

Usman Mehmood
seal-mask
.a{fill-rule:evenodd;}techdegree
Usman Mehmood
Full Stack JavaScript Techdegree Student 14,330 Points
Usman Mehmood
.a{fill-rule:evenodd;}techdegree
Usman Mehmood
Full Stack JavaScript Techdegree Student 14,330 Points

Hey,

I was wondering why it wasn't rendering anything as well and I'm thinking there's been some updates. Not even sure if you care anymore lol but what you have to do is encapsulate all of the JSX in <BrowserRouter></BrowserRouter> tags and it'll render as it's supposed to.

Good luck!

Anthony Albertorio
Anthony Albertorio
22,624 Points
Anthony Albertorio
Anthony Albertorio
22,624 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