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 trialNick Trabue
Courses Plus Student 12,666 PointsTypeError: 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">
<h2>Courses</h2>
<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>
</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;
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
Courses Plus Student 7,930 PointsThe 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.
Babak Bandpey
Courses Plus Student 7,930 PointsHaving the same issue. have used couple of hours to find solution, and I seem to not get why it is happening.
Nick Trabue
Courses Plus Student 12,666 PointsThis went away after adding the "Switch" piece in the next lesson. Still not sure I understand how/why.
Unsubscribed User
Full Stack JavaScript Techdegree Graduate 24,339 PointsUnsubscribed User
Full Stack JavaScript Techdegree Graduate 24,339 PointsThis 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!