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!

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 Using the Match Object

TypeError: Cannot read property 'url' of undefined

I'm getting this error no matter what I try to change to fix it. As far as I can tell I've matched Guil's code completely

import React from 'react';
import {Route, NavLink, Redirect
} from 'react-router-dom';
//App Components
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">
      <ul className="course-nav">
          <li><NavLink to={`${match.url}/html`}>HTML</NavLink></li>
          <li><NavLink to={`${match.url}/css`}>CSS</NavLink></li>
          <li><NavLink to={`${match.url}/javascript`}>JavaScript</NavLink></li>

    {/* 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} />

export default Courses;

It shows that it compiles successfully and I can view all the routes until I get to courses. × TypeError: Cannot read property 'url' of undefined Courses src/components/Courses.js:14 11 | <div className="course-header group"> 12 | <h2>Courses</h2> 13 | <ul className="course-nav">

14 | <li><NavLink to={`${match.url}/html`}>HTML</NavLink></li> 15 | <li><NavLink to={`${match.url}/css`}>CSS</NavLink></li> 16 | <li><NavLink to={`${match.url}/javascript`}>JavaScript</NavLink></li> 17 | </ul> View compiled ▶ 34 stack frames were collapsed. (anonymous function) src/index.js:6 3 | import App from './components/App'; 4 | import './css/index.css'; 5 | 6 | ReactDOM.render( 7 | <App />, 8 | document.getElementById('root') 9 | ); View compiled ▶ 6 stack frames were collapsed. This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error.

3 Answers

Babak Bandpey
Babak Bandpey
Courses Plus Student 7,930 Points

The issue and the solution to this.

the problem occurs when I use

<Route path="/courses" render={()=><Courses />} /> 

instead of

<Route path="/courses" component={Courses} />

obviously these two behave differently. The first one does not receive the props.

Marie Ehrman
.a{fill-rule:evenodd;}techdegree seal-36
Marie Ehrman
Full Stack JavaScript Techdegree Graduate 24,338 Points

This was exactly the issue for me!

In App.js, I tried to render the Courses component similarly to what we had done for the About component. Doing this messed up using { match } after this video.

Thanks for the help!

Babak Bandpey
Babak Bandpey
Courses Plus Student 7,930 Points

Having the same issue. have used couple of hours to find solution, and I seem to not get why it is happening.

This went away after adding the "Switch" piece in the next lesson. Still not sure I understand how/why.