Full React Tutorial #23 - Router Links

Key Takeaways

all right then so we've set up multiple different routes now for forward slash and forward slash create but when we click on these links to those different routes it's still currently sending a fresh request to the server for a new page we get the same html page back each time and then react is injecting the correct content but we did say that react router can intercept those requests and just handle the content changes in the browser instead and it can do but to do it we need to use a special link tag so let's go to the navbar and try to use this all right so the first thing we need to do is import this link tag from the react router dom package so let's say import and we want to destructure the link component from react router hyphen dom like so all right so currently what we're doing is creating anchor tags right here and that's fine to do but if you want react to handle the routing only in the browser and to intercept those requests for new pages we need to replace these with link instead and then let's change the closing tag like so now a link component doesn't have an href like an anchor tag instead it uses two so now we're saying we want to link to forward slash and down here let's replace this as well so link and then change this to link and change this to two okay so at the end of the day when react renders all of this to the browser we still will see anchor tags and i can demonstrate that if i preview this over here inspect the element they're still anchor tags right and they're still clicked on and they still try to send a request to the server for a new page however built into these link tags is a special functionality and that is for react router to have the ability to prevent that request to the server and then instead it just looks at the url or the path where we're going to and then it matches that against one of our routes right here and it tries to inject whatever content that we need because we don't really need the server to resend back the html page doesn't make much sense so let's give this a whirl and you're probably going to notice that it's very very quick home and creates much quicker than sending a fresh request every time we want a new page to the server but i want to show you one thing first of all let me go home and let me then refresh and then i want to open up the console over here now watch this if i go to new blog it's fine if i go to home it's fine but then if i quickly go to new blog we then get an error and it says warning can't perform a react state update on an unmounted component now this is to do with our custom fetch hook which is still running in the home page it's still running in the background even though we've gone to a new page over here and it's trying to update the state of our home component after it's been unmounted from the dom and replaced with this create component now we're going to see how to combat this error using a cleanup function in our use effect hook next