Loading
Lesson 06
Courses / Introduction to React Router v3
Defining the Initial Page Content with IndexRoute

Video Transcript

Hello everybody, welcome back. So now that we have a menu, a fixed menu, and we are able to change routes, there's only one thing that's kind of funny here. If you go to slash and there's no content, right? Because, well, there's no page for that. We didn't create anything. If you go to about, there's something down there. You go to products, there's something down there, but if you go back to the initial page, the slash, there's nothing. Well, that's okay if you don't want anything to appear there, but if you do, then we are going to learn how to display the default page right there, and that's called the index route. We're going to use the index route component from React Router. So let's get to work. It's very simple. So all we have to do is like so. So here we have the route that has nested routes, right? But since slash does not match any of these, so nothing's going to appear in that props.children area here from the app.js component. Here's app.js. The app component render method, return value. Now if you want something to appear, if you go to slash, you have to add what's called the index route. Okay, so if you had this index route and you want some kind of initial page to appear, you just say like so. Index route component is whatever you wanted to appear. Let's create a new component to be the index route. How about we say, I don't know, let's call it main. And then let's create this component. Let's go to SRC and create a new main.js component. And let's proceed as before import react from react to be able to use asex. Let's define our main component as a stateless functional component takes props. I'm going to omit it if you want to add props there, free to do so. And we're just going to say this is the initial page. Welcome. Just going to have a simple page. Let's not forget to export default down there. Now back to index. We are using main but we have to import it. Don't forget import main from main. Now let's remove this warning right here before we move on SRC slash app.js as a warning, because I'm not using products anymore. So let's remove that. Okay, so I'm apt.js have removed that import products. We don't need it anymore. Now back to where we were before, we created main.js. And then we import it and then we added it as the index route for the slash. Now let's see what we have index route is not defined because we forgot to import it. So let go back there. Index route is part of the react router. Module so add index route here. Port next route on react router and there you go. We are in slash and you see this is the initial page welcome. If you go to about it changes products changes and back to slash. This is the initial page welcome. Okay, so this is how you define a initial page for that app that is has necessary routes. Once again, let's review. It's very simple to define an initial route for this route that has necessary routes. In this case slash if you want something to appear that just add an index route with the component that you want whose content you want to appear. Okay, that's all. If you like the video please click the like button and please subscribe if you're not already my subscriber. Until the next time then bye!
No comments yet (loading...)
No comments yet (loading...)
Did you like the lesson? 😆👍
Consider a donation to support our work: