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
Mia Filisch
16,117 PointsCourse content outdated: Recommended Syntax for declaring routes
The Treehouse React Router course introduces two ways of rendering components in routes in this and the following video:
- Using the
componentprop:
<Route exact path="/" component={Home} />
- Using the
renderprop:
<Route path="/about" render={() => <About title="About" />} />
However, all the examples of Route in the React Router docs instead use a different, newer syntax which renders the component as a child of Route, the two examples above would then look like this:
<Route exact path="/">
<Home />
</Route>
<Route path="/about" >
<About title="About" />
</Route>
Section of the docs about this being the recommended approach: https://reactrouter.com/web/api/Route/route-render-methods
It would be great if the course could be updated to reflect this.
Eduardo Osorio
Full Stack JavaScript Techdegree Graduate 20,847 PointsI suggest you don't implement this new syntax or later on in the course you won't be able to access the match object.
Mia Filisch
16,117 PointsEduardo Osorio - you can still access the match object, one way of accessing it is via the useRouteMatch() hook. Example usage:
import React from 'react';
import { useRouteMatch } from 'react-router-dom';
const Featured = () => {
let match = useRouteMatch();
let name = `${match.params.fname} ${match.params.lname}`;
let topic = match.params.topic;
return (
<div className="main-content">
<h2>{name}</h2>
<p>Introducing <strong>{name}</strong>, a teacher who loves teaching courses about <strong>{topic}</strong>!</p>
</div>
);
}
export default Featured;
It's been a while since I took the course so if this doesn't solve your issue pls do share more details on where you're getting stuck and I can try and refresh my memory to help more :)
4 Answers
Mark Westerweel
Full Stack JavaScript Techdegree Graduate 22,378 PointsThank you for this info!
I find it rather annoying learning something that is outdated from the get-go.
Will implement this as I follow Guil.
jl64
Full Stack JavaScript Techdegree Graduate 19,359 PointsI share your thoughts. It is quite annoying to be paying so much for lessons that are outdated by almost 4 years. I really wonder if Treehouse ever intends on updating any of their content. Seems like they want to just fall back on their Slack Team and students to address issues with their content.
Mark Westerweel
Full Stack JavaScript Techdegree Graduate 22,378 PointsYeah, wondered about that as well. I think a lot drop out, since I see very few graduates on here (you should be able to stay on to peer review, imho -- I mean, it HELPS them as well (a lot) ). Or be able to do tracks if you help out or something.
I will finish the course and continue on Pluralsight, etc, along with opting for a bootcamp. Treehouse is good for a foundation, but that's it. Bit expensive when you indeed take in consideration that lot of it is outdated.
Not expecting this platform to be around in another 4 year, TBH
Steven Abaco
Full Stack JavaScript Techdegree Graduate 17,883 PointsIt's frustrating paying so much for a program which doesn't keep their content current and has broken videos all over the place. I'm sure other students also expect to be taught current material inline with the latest versions of the languages and packages we are learning. I started seeing this downhill pattern as we started getting into React. It seems to be going further down hill. Will keep trying to stay engaged to see if it gets any better.
Mark Westerweel
Full Stack JavaScript Techdegree Graduate 22,378 PointsSeriously, I am a bit further.
Save your money. Do code academy, odin project for free.
Money vakue is Wes Bos or JOSH COMEAU (when he accepts again) and just build on your own.
Most here is from docs anyways and nowadays you really don't want class components and separate css files, lol.
DM me on twitter @I_Am_Coding
Mark Westerweel
Full Stack JavaScript Techdegree Graduate 22,378 PointsSeriously, I am a bit further.
Save your money. Do code academy, odin project for free.
Money vakue is Wes Bos or JOSH COMEAU (when he accepts again) and just build on your own.
Most here is from docs anyways and nowadays you really don't want class components and separate css files, lol.
DM me on twitter @I_Am_Coding
Zaid Khan
12,769 PointsZaid Khan
12,769 PointsThanks a lot for this.