It's gonna take in two arguments, it's gonna first take in the route and then the linkText. So I can come here and say const and let's call this dynamicLink and this is gonna be an arrow function. And so, the way that you can do this inside of a functional component is very similar to defining any kind of function. So, I'm gonna paste this up here and then from here what we can do is actually implement the function itself. Now what I'd like to do is instead of writing too much code directly inside of here, I would like to create a function that will work if the user is logged in or if they're not, so what I can do here is I'm actually gonna get rid of all of this code and I should say I'm cutting it and I'm gonna put it up here. So we have our return statement which is bringing in the nav-wrapper. So I'm not logged in, you can see that by my logged in status, so let's switch to Visual Studio Code here and let's take a look at everything that needs to be done. So in this guide, we're gonna walk through first how to hide the link, and then in the next guide, we'll see how we can actually get rid of the route entirely. Well, that's one part of it, we also though need to think about the route definition itself. So let's say that that link should only show up when you're logged in. Now, this will be available to everyone in the final product but we haven't created the Portfolio Manager or the Blog Manager, so I don't wanna spend time in creating those 'til they're actually needed, so we're gonna use this Blog link as the test. We have to think first of what the user sees, so say that we want this Blog link here to only show up if you're logged in. So, we're going to see specifically how we can update the navbar based on if a user's logged in or not and I'm gonna break this into two guides because we have to think about this in two different ways.
0 Comments
Leave a Reply. |