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 Christopher Stuart
.a{fill-rule:evenodd;}techdegree seal-36
Christopher Stuart
Full Stack JavaScript Techdegree Graduate 27,771 Points

Why No BrowserRouter here?

Just wondering why no BrowserRouter component used in this one as in the previous tutorial? I did use it in my answer and appears to work, but just not sure what it is actually doing if not necessary here. Thanks

4 Answers

Gabbie Metheny
Gabbie Metheny
33,778 Points
Gabbie Metheny
Gabbie Metheny
33,778 Points

Actually, I believe the reason we're not using BrowserRouter here precisely because we're already using it in our App component. Since Courses is nested inside of App, it's already nested inside of a BrowserRouter as well. Initially, I did the same as you and included new <BrowserRouter> tags, but that seemed to cause some weird rendering issues.

Mike Hatch
Mike Hatch
14,940 Points

Yes, same here Gabbie. I also couldn't switch course links because of it.

Zack Lee
PLUS
Zack Lee
Courses Plus Student 17,662 Points
Zack Lee
Zack Lee
Courses Plus Student 17,662 Points

if you look at your code you may find that your using the <Router> component. The <BrowserRouter> is a react v4 component which makes use of the browser history and takes care of setting up that context for you. It keeps the UI synced with the URL.

check out this handy doc from the react team: https://reacttraining.com/react-router/web/api/BrowserRouter

John Moran
John Moran
7,950 Points

I had the same problem and confusion, if I use <BrowserRouter> in the courses.js file, it doesn't load. Do we only we only use <BrowserRouters/> in one place in the entire app? - on the main app or index.js file? like the master file of the app?

Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

Hiya there! <Router> gets imported as browserRouter from react-router-dom , so yeah <Router> is just an alias for browserRouter. Besides You're doing React for web , so yeah React knows its browerRouter , not for Native platform.

~ Ari

Ghiberty Meza
Ghiberty Meza
6,410 Points
Ghiberty Meza
Ghiberty Meza
6,410 Points

I actually did include the browser route on top of the div main-content course and the Routes or components render as expected, so even tho the answer with the highest score seems to be corrected; that the app component already has the browseRouter and wraps courses; I will guess the Route wouldn't work without BrowserRouter.

Ghiberty Meza
Ghiberty Meza
6,410 Points

Also, what would be the behavior of having a BrowserRouter inside another BrowserRouter?

Mike Straw
Mike Straw
7,100 Points

Also, what would be the behavior of having a BrowserRouter inside another BrowserRouter?

I initially implemented it just that way. When I used <BrowserRouter> inside its own div it actually worked:

import React from 'react';
import { BrowserRouter, Route, NavLink } from 'react-router-dom';
import HTML from './courses/HTML';
import CSS from './courses/CSS';
import JavaScript from "./courses/JavaScript";

const Courses = () => (
  <BrowserRouter>
    <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>
      <div className="container">
        <Route path="/courses/html" component={HTML} />
        <Route path="/courses/css" component={CSS} />
        <Route path="/courses/javascript" component={JavaScript} />
      </div>
    </div>
  </BrowserRouter>
);

export default Courses;

It's not great for performance, though, as it's loading one within the other. Since it's only needed once, I switched to Guil's solution.