Complete React Tutorial (&Redux) #32 - Switch Tag

Key Takeaways

alright then gang so in the last video we encountered this little problem or right here when we go to forward slash contact or forward slash about we get the about component and we get the contact component but we also get this one tacked on at the end as well the individual post component and that's because in this case the contact URL right here it matches this route for forward slash contact but it also matches this route for forward slash post ID because who's to say that forward slash contact is not a post ID there's nothing here to say that hey our post ID has to be a number or it can't be contact so it's interpreting forward slash contact as a post ID as well as this thing right here so what we need is a way to only load up one of the two either this if it's contact or this if it's some other kind of post ID routes now one way to combat this would be to change this to forward slash posts then forward slash the post ID because obviously we wouldn't say forward slash posts forward slash contact then we'd have to update our links right here to say forward slash posts forward slash then the post ID and this will work and I'll show you that if we save that now and we go to the contact page we no longer see that other thing and if we go to about we no longer see it but if we go to home and then click on one of these then we go to forward slash posts forward slash one so that is working right but say you didn't want to restructure your URLs like this you don't have to do that let's get rid of that for now take off the posts there and go to the home component and take off the posts there so how else can we combat this well we can combat this with a switch tab so let me just import this first of all and set this up then I'm going to explain exactly what it does we're importing it from the react router Dom and then what we're going to do is surround all of these routes right here with the switch tank so let's do that and we'll close it off afterwards at the bottom like so and then basically what this does is say okay at any point in time I only want one of these routes to take precedence I don't want to match two at a time like these two for example I only want to match one of them so now what will happen is when we type something in up here or when we link to something it will look at the URL right here and then it will start at the top of this route stack right here the stack of routes and it will go down does it match this one no okay does it match this one no does it match this one yes it does so a load this component in and then I'll stop there I won't try to match the next one if we didn't have the switch tag then it would carry on and it would match as many as it could and load all of those components up but with the switch tag right here we're only matching the first one we find in this case the forward slash contact so let's save it let's try the contact page this works about page this works so we don't have that problem anymore all right so that is how we can use the switch tag to only load up one component