4.13 Creating Navigation

Now over on the left here we've had our filler text navigation for quite awhile now, but I think the time has come to actually create a little bit of simple navigation. We have a couple of different roots in our application. So far we have our home root which is where you can view your timeline. We also have \users, where you can see a list of all the other users. And we also have \logout, which is the route which will log you out and then take you back to the login page. So we should create some simple navigation that will allow the users to easily move between those routes. So we'll start by creating a brand new component, and this will be called navigation. And once again, we will start by pulling in react. Now, because we're creating links that we want react router to use, we'll also need our link, so we get our link from react-router.link, and then we're also going to need the UserStore, which is what we'll use to get the current user, so that is going to be at one level up, /stores/users. So now we can create our navigation class, and once again we'll start with our getInitialState: function and the state that we want to get is the name of the currently logged in user. So we can say username: UserStore.currentuser.username. And now let's go ahead and create a very simple render function, this will just return an un-ordered list, and in here we'll have a couple of links inside of list items. So, the first link we can say link and we're going to and this to our home route, and we can just have the text home in here. Now remember to here takes the name of our route. And if we go back to our main.js file you can see that we have three routes named home, users and user, which we're going to get to in the next lesson. So, this is linking to home. And actually, let's not have the text be home, let's have the text be Timeline. All right so I am going to duplicate that, and we will have the next one go to users and the text will be Users as well. This is where the user of course can see all the other users that they might want to follow. Finally, the last list item will not be a router link, it will just be a regular anchor tag and it is going to go to /logout, and of course this is how the user will actually log out of the application. So we'll give them the text Logout, and then after this anchor element, we can just include their username, so we'll say this.state.usnername. There we go, this of course would be helpful if maybe they have multiple accounts or something like that. This is really all we need to do for navigation. Now the place where we're calling navigation is from our App.js file, so let's come back to App.js and let's pull in the navigation class. So we can say navigation = require (./navigation), and then down here we can just say Navigation inside of our three column here, and that's really all we have to do. If we come back to our application and log in, now you can see over on the left here we have some nice navigation. I can navigate to the Users page, I can navigate back to the Timeline, or I could log out. So, that is our navigation. Again, it's a simple feature, but it adds exactly the functionality that we need.