Inline Rendering with <Route>5:15 with Guil Hernandez
<Route> provides additional ways to render a component. For example, the
render prop lets you do inline component rendering.
In the previous video, I asked you to write the routes for 0:00 the teachers and courses components. 0:02 If you haven't created them yet, that's okay, we'll write them now. 0:04 So first, let's import the teachers and courses components in app.js, 0:07 with import Teachers from './Teachers'. 0:12 And import Courses from './Courses'. 0:19 Now we'll render these components into app at their respective paths using the route 0:27 component, so below the about route I'll include a new route for teachers. 0:33 Where path =" /teachers", and 0:38 the component to render will be Teachers. 0:41 Below that, include a new route for courses, so 0:47 I'll set path to /courses, And component to Courses. 0:52 So now each route should render it's assigned component when it's path matches 1:03 the URL, let's try it out. 1:07 Over in my app, if I change the URL to /teachers, 1:09 we see the teacher's component displaying the list of teachers, 1:15 change it to /courses and we see the courses component, great. 1:18 Now there aren't any courses listed here yet, you'll be adding those later in this 1:24 course, in fact, I'm saving that for a special challenge for you. 1:27 Now remember earlier when I mentioned that react router is just a set of components? 1:31 Well, if you open up the react DevTools in your browser, 1:35 you'll see the BrowserRouter component inside app. 1:39 And nested inside is Router, which is the core routing component that provides all 1:44 the context its descendant components need in order to match a path to the URL. 1:49 Then we have our Route component inside Router, and notice that when 1:54 a route's path does not match the current URL, the router renders null. 2:00 Now, currently the URL is /courses, so the Home, about, teachers route render null. 2:06 While courses is the only Route that's rendering a component into the DOM. 2:14 Also, react doesn't render any of the routing components to the actual DOM, 2:18 they just manage what gets rendered. 2:23 So if I switch over to the Elements tab here in Chrome DevTools, you'll see just 2:25 the HTML for our app, and it's displaying the markup for the courses component only. 2:29 The react empty comments you see here, are a result of the other routes like home, 2:35 about, and teachers being rendered as null for this URL. 2:40 There are other ways you can render a component with Route besides the component 2:44 pro, so, for example, the render prop lets you do inline component rendering. 2:49 Instead of passing at name of the component to render 2:55 you pass it a function that returns the component. 2:58 So let's pass the about Route and arrow function that returns the about component, 3:01 So now whenever the URL matches the about path the function here gets called and 3:10 renders the about component 3:16 Now one of the main reasons you'd wanna use the render prop over the component 3:22 prop is when you need to pass props to the component you're rendering. 3:26 Remember, in react, we pass data to components via attributes called props, 3:30 props are how components talk to each other. 3:34 Props passed to a component can be used to render dynamic content, so far example, 3:37 we can give the about component a prop of title and set the value to About. 3:42 And the title prop is now available in our about component as props and 3:49 can be used in its render method to render content. 3:54 So About is a stateless component, written using an error function, 3:58 when describing a component using a function you can access props by passing 4:03 the function the props object via the props argument. 4:07 A common name for this argument, so to display the title dynamically I'll 4:11 replace the text in the h2 with a set of curly braces, 4:16 then inside the curly braces, I'll write props.title. 4:19 And as you can see, this renders the about heading in the component. 4:26 Now this is a basic example of passing a string, as a prop, 4:30 but as you've learned in a previous course, you can pass other types of props, 4:35 like arrays, objects, and functions. 4:39 So far example, in a later video, we'll use inline rendering 4:42 to pass the data from inside the courses array into a component via props. 4:45 You can learn a whole lot more about props and 4:51 arrow functions in the resources posted in the teacher's notes. 4:52 The directory app is missing two important features, the functionality of the main 4:57 navigation, and the list of courses inside the courses component. 5:01 So coming up in the next stage, 5:05 you'll learn more useful features of react router that let you navigate between 5:06 routes, render nested routes, pass data to components via routes, and more. 5:10 See you soon. 5:14
You need to sign up for Treehouse in order to download course files.Sign up