I don't quite understand Redirect

I think it only redirects the first time Courses component is rendered to the UI. When clicking on the nav links, we only render the HTML, CSS or JavaScript components instead of re-rendering the whole Courses component again, so the code for redirecting is not executed.

I think you are right pluboj (I would be surprised if you see this comment over 3 years later - but props to you). I'm still trying to get my understanding right so I will write my steps in more detail:

TL;DR

• <Redirect .../> is a component and not a route
• React will render a component once unless something has changed
• Clicking the link to /courses is looking for routes
• This is why <Redirect .../> is "ignored" as we are misinterpreting it

FULL DETAILS

First Time you click the /courses navigation link

To start you are in the App component:

const App = () => (
  <BrowserRouter>
    <div className="container">
      <Header />

      <Route exact path="/" component={Home} />
      <Route path="/about" render={ () => <About title='About' /> } />
      <Route path="/teachers" component={Teachers} />
      <Route path="/courses" component={Courses} /> {/* It's this one we want */}
    </div>
  </BrowserRouter>
);

• React Router looks in the App component (shown above) for the route /courses and there is one.
• It tells it to open up the Courses component so it renders the Courses markup it's given

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>

    <Redirect to="/courses/html" />
    {/* <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>
);

• Now we are in the Courses component (shown above), when the Redirect is "rendered" it forces you to /courses/html as expected.

Second Time you click the /courses navigation link

Now you are already in the Courses component. The routes available to you are:

    <Redirect to="/courses/html" /> {/* Now I don't believe this to be a route */}
    <Route path="/courses/html" component={HTML} />
    <Route path="/courses/css" component={CSS} />
    <Route path="/courses/javascript" component={JavaScript} />

• Clicking the /courses link in the Header component now, must only have access to these links and there isn't a match.

• Remember, Guil Hernandez said <Redirect ... /> is a component to be rendered, not a <Route />. As the Courses markup has already been rendered, <Redirect ... /> isn't invoked again.

• For this reason, React will only render the hardcoded links we set up at the top of the Courses component that don't rely on routes.

It is blank because when you click on 'courses' the URL changes to' /courses' and that doesn't match any redirect.

I also don't quite get why it wouldn't redirect a second time? Have you figured this out maybe? @Zack Guo

That's because, each <Route/> will automatically pass a props to the its Component(you can console.log(props) in its child component, even though you didn't pass a a parameter by yourself ), when the first time you shuffled from Home page to Courses page, their Route changed, and their carried props changes. Remember that the page will be re-rendered when state or props changes... so when you shuffle from Home to Courses, the page re-rendered and it redirected to /courses/html, the second time you clicked Courses, the paged didn't get re-rendered...and you didn't see the redirect. I 'am trying to figure out how redirect links to the props, I console.log(props), it seems like a aysnc object..