Lesson 06
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: