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 Redirecting a Route

Luis Onate
Luis Onate
13,222 Points
Posted by Luis Onate
Luis Onate
13,222 Points

"Courses" NavLink doesn't redirect to "/courses/html" after the first redirect.

Steps: I click the "Courses" NavLink and it redirects "/courses" to "/courses/html". If you then click on "Courses" again it takes me to "/courses" and does not redirect to "/courses/html". Not sure if it is my code or something to do perhaps with different React packages than what the videos were made with?

Here are my dependencies:

  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router-dom": "^4.1.1"
  }

Here is my "Courses" component:

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

// Components
import CSS from './courses/CSS';
import HTML from './courses/HTML';
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>
      <Route exact path="/courses" render={ () => <Redirect to="/courses/html" /> }/>
      <Route path="/courses/html" component={HTML}/>
      <Route path="/courses/css" component={CSS}/>
      <Route path="/courses/javascript" component={JavaScript}/>
    </div>
  </BrowserRouter>
);

export default Courses;
Anton Kilk
seal-mask
.a{fill-rule:evenodd;}techdegree
Anton Kilk
Full Stack JavaScript Techdegree Student 11,256 Points
Anton Kilk
.a{fill-rule:evenodd;}techdegree
Anton Kilk
Full Stack JavaScript Techdegree Student 11,256 Points

Same problem here. All previous suggestions tried. UPD: I noticed that in "Header.js" I have not put backslash in front of link , so:

<li><NavLink to="/teachers">Teachers</NavLink></li>

was like this:

<li><NavLink to="teachers">Teachers</NavLink></li>

So instead of redirecting to "/teachers", I was redirected to unexisting "/courses/teachers" etc. After correction problem has gone.

3 Answers

Pierre Smith
Pierre Smith
11,842 Points
Pierre Smith
Pierre Smith
11,842 Points

get rid of the BrowserRouter component you don't need it there. Try not to forget that the header is nested within your app.js which already has a BrowserRouter component.

alex ruzenhack
PLUS
alex ruzenhack
Courses Plus Student 11,188 Points
alex ruzenhack
alex ruzenhack
Courses Plus Student 11,188 Points

You need to remove the exact property from <Route to="courses" ... /> in the App.js. I had the same problem.

Robert Hernandez
Robert Hernandez
9,357 Points
Robert Hernandez
Robert Hernandez
9,357 Points

I was having the same problem, and I tried all the suggestions in this thread and the one in the following video. I still had the problem.

I tested it by running the final build of the app included in the downloadable.zip file. That version is without the problem, so I'm assuming Guil addresses it in later videos. I'm going to keep plugging and see if he brings it up.

Josh Seltzer
seal-mask
.a{fill-rule:evenodd;}techdegree
Josh Seltzer
Full Stack JavaScript Techdegree Student 10,838 Points
Josh Seltzer
.a{fill-rule:evenodd;}techdegree
Josh Seltzer
Full Stack JavaScript Techdegree Student 10,838 Points

If anyone gets stuck on this. I combined the hints of removing the exact from the Route to /courses in App.js and removing BrowserRouter to get this working.

Final Product of Courses.js that works as intended

import React from 'react';
import {Route, NavLink, Redirect} from 'react-router-dom';
import HTML from './courses/HTML';
import CSS from './courses/CSS';
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 exact path="/courses" render={ () => <Redirect to='/courses/html'/>}/>
            <Route path="/courses/html">
                <HTML/>
            </Route>
            <Route path="/courses/css">
                <CSS/>
            </Route>
            <Route path="/courses/javascript">
                <JavaScript/>
            </Route>

        </div>
);

export default Courses;