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

Kate Ross
seal-mask
.a{fill-rule:evenodd;}techdegree
Kate Ross
Full Stack JavaScript Techdegree Student 19,434 Points
Posted by Kate Ross
.a{fill-rule:evenodd;}techdegree
Kate Ross
Full Stack JavaScript Techdegree Student 19,434 Points

HTML is always active

After changing the paths to match path HTML is also showing active when CSS or Javascript are active

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


import HTML from './courses/HTML';
import CSS from './courses/CSS';
import JavaScript from './courses/JavaScript'

const Courses = ({match}) => (
  <div className="main-content courses">
    <div className="course-header group">
      <h2>Courses</h2>
      <ul className="course-nav">
        <li><NavLink to={`${match.url}`}>HTML</NavLink></li>
        <li><NavLink to={`${match.url}/css`}>CSS</NavLink></li>
        <li><NavLink to={`${match.url}/javascript`}>JavaScript</NavLink></li>
      </ul>
    </div>

    {/* Write routes here... */}
    <Route exact path={`${match.path}`} render={ () => <Redirect to={`${match.path}/html`} /> } />
    <Route path={`${match.path}/html`} component={HTML} />
    <Route path={`${match.path}/css`} component={CSS} />
    <Route path={`${match.path}/javascript`} component={JavaScript} />
  </div>
);

export default Courses;
Kate Ross
seal-mask
.a{fill-rule:evenodd;}techdegree
Kate Ross
Full Stack JavaScript Techdegree Student 19,434 Points
Kate Ross
.a{fill-rule:evenodd;}techdegree
Kate Ross
Full Stack JavaScript Techdegree Student 19,434 Points

For the redirect I have also tried the code as given in the example

<Route exact path={match.path} render={ () => <Redirect to={`${match.path}/html`} /> } />

1 Answer

Charlie Gallentine
Charlie Gallentine
12,092 Points
Charlie Gallentine
Charlie Gallentine
12,092 Points

Without having your files on my computer it is difficult to know exactly what is wrong, but I'll see if I can help at all. Here are my best guesses in comments. Hopefully I'm interpreting your question correctly and if this doesn't totally fix your problem, hopefully it can give clues in the right direction.

import React from 'react';
import {
  NavLink,
  Route,
  BrowserRouter, 
/* Added an import for BrowserRouter, 
this keeps the app in sync with the browser */
  Redirect,
} from 'react-router-dom';


import HTML from './courses/HTML';
import CSS from './courses/CSS';
import JavaScript from './courses/JavaScript'; /* Missing semicolon*/

const Courses = ({match}) => (
<BrowserRouter> /* Opening BrowserRouter tag */
  <div className="main-content courses">
    <div className="course-header group">
      <h2>Courses</h2>
      <ul className="course-nav">
        <li><NavLink to={`${match.url}/html`}>HTML</NavLink></li> 
/* Added end of path to html, should help button function properly and avoid redirect */
        <li><NavLink to={`${match.url}/css`}>CSS</NavLink></li>
        <li><NavLink to={`${match.url}/javascript`}>JavaScript</NavLink></li>
      </ul>
    </div>

    {/* Write routes here... */}
    <Route exact path={match.path} /*<--Removed string literal*/ render={ () => <Redirect to={`${match.path}/html`} /> } />
    <Route path={`${match.path}/html`} component={HTML} />
    <Route path={`${match.path}/css`} component={CSS} />
    <Route path={`${match.path}/javascript`} component={JavaScript} />
  </div>
</BrowserRouter> /* Closing BrowserRouter tag */
);

export default Courses;

Because I cannot access your entire file tree, these are my best guesses. I think, aside from, small syntax errors, that the biggest issue was a lack of the BrowserRouter to keep the app in sync, and potentially the <NavLink> to HTML causing unintended redirects to the HTML page.