React Router basics and advanced tips

hi i'm martin and welcome to turtle javascript today i will cover basic and advanced topics of react router react is by many considered the best overall javascript framework for building web applications one of the most important basics that you need to master is react routing react router allows your web application to be organized into pages on different urls as you are used to with any other pages on the internet because whole react is just one big javascript all pages are loaded up and displayed immediately when you click on a link i will cover the basics as well as some advanced topics including 404 pages redirects asynchronous pages and sitemap i have used these techniques to build all my websites including turtle.com to skip to any section that interests you you can find the time markers in the description i have also linked there the text version of the video that contains all the code and resources that you may need react routes use the package react router dom so start by installing that one because i prefer functional programming i'm also using my turtle lambda library to make my code more elegant you can either rewrite those examples or install the library by i will use the library only couple of times here so no worries our next step is to create the routes.js next to your index.js this is a file where we will be placing our routes the file will hold the route configuration a route with just two pages will look like this configuration is done through tech children under the switch component route tag contains audio routes the exact parameter makes sure that only exact matches are used the path parameter contains the address of your page and the component then holds the react page itself for 404 page just define route without any path which will send all the remaining requests just there the router goes through all the routes sequentially from the top to the bottom and uses the first match it finds that means that your 404 needs to be the last after all the other roads and redirects the router component then has to be used in your fjs like this notice the router section using the routes that we have defined in the previous file this is how routing happens routes will affect only the area of the route stack the header or any other jsx around is not affected this way you can define for example a menu or a header and footer that remind the same independently on the router one trick that i am adding here is the base name that you can see here in the code the base name is the base url for all locations if your app is served from a subdirectory on your server you will want to set this to the subdirectory a properly formatted base name should have a leading slash but no trading slash i always use this code with get base name function for situations when my react app could be used from some sum directory this will elegantly take care of defining the correct base name you may want to edit it further however if you want to rely on some more complicated routing yourself you define a page as any other component because it is nothing but just another component the only difference is that react router manages the road component visibility based on the url this is an example of a page it's very simple as you can see in the same way you can define any other pages or your 404 page page gets displayed based on the path used in the routes.js so you can see home page used here with the path of root the page component displays in the place of routes component in fjs so this whole section gets replaced by the home page one challenge that you will find is that if you scroll a page and reopen it the user will return to the scrolled position instead of the top of the page if you want to ensure that the pages are always scrolled to the top when they are opened just create a parent page component like this one that you can see on the screen we simply use react's use effect to trigger instant scroll to the top just three lines of code you can also use this to implement any other behavior that should happen on every page or to add any text to decorate a page like the main tag in this example then just use this page in all the pages where you want it by adding the tag as a parent like in this example of a 404 page linking to pages from your components is simple by using the link component we can add a link back to a home page from the 404 page the link tag is super simple and requires only the 2 parameter which needs to match your route from the routes.js you may want to define some standard redirects in your application that for example always redirect the root path to your login page you can do that by adding the redirect component to your routes.js in the redirect tag both the parameters from and two are paths make sure that your redirects are defined higher than your 404 route you may also wish to redirect to a page programmatically from your code you do that by using the use history in your in this example we use use effect to watch for changes in the state of authentication and if the user is authenticated the page triggers redirect to subpage your path should again match one of those your paths from routes.js react is just one big javascript so all your pages always load up with your first server request and then links work instantaneously instead of making server requests with each page if you want to make the initial request smaller and faster you can load some of your pages asynchronously i am using this technique for learning pages on tert lambda so you can see here if i click here you can barely see the difference that there was a loading page and you can go yourself and test it there the page of course loads only once so all subsequent visits are again instantaneous to support this you will need a new package react loadable now to make a page load asynchronously add this definition to routes.js here i am adding deludable here i am defining async pages my one asking page is here it will use the page on my async sub page and this is how i edit to my route one thing that we also need to define is the loading page that displays loading information while the system loads the page from your server you can create it like this it's just a standard page as simple as it can be i recommend maintaining a sitemap for your website it is good for search engines since google can now grow react pages and it also helps you manage your site as it grows what i do is define sitemap object in route.js you can see here you can see that it defines all the information that i need for links and uses the path in route component i then leverage the sitemap in my own link turtle component as you can see here it's fairly simple and it's based on the link component from react router dome in your own components the link turtle is used very simply you can see that we simply pass the sitemap homepage to the link turtle and everything happens automatically or we can also define any of the parameters manually your website should also maintain sitemap xml and robots.txt i maintain these manually and make sure that they align with my routes.js this is my sitemap.xml notice that you always need a full url including the correct protocol and then my robots.txt links to it like this again i'm using the full url that is all for react router itself but when you deploy your new application to production you may soon find out that simply calling any subpage of your application may not work routing will always work when you start from your route because router doesn't call your server to navigate but instead uses browser history features so with most providers if you call any url of your site it will fail the usual solution is make sure that all the requests are always passed to the index and the specific solution always depends on the specific service that you are using for example if you are deploying your react dab as serverless on netlify you need to add redirects file to the root of your application now everything should work the way you expect and your routes will be fully supported and it's just one line for netify the same situation happens if you want to use amazon web services with s3 for servers delivery i'm using in that case a solution from stack overflow that you can see on the screen you can put index html in the error document box go to your bucket the one that actually has the code not the one that you use to redirect go to properties and then static website hosting if you are using amazon web services scout front you can follow advice from the same article create a custom error page create a custom error page in cloudfront distribution that routes four or four errors to index.html and returns to 100 response code this way your application will handle the routing it's a setup that you can see on the screen on the screenshot react router is really powerful and it is what i use for all my web applications built in react here i am giving you all the secrets of my setup that i'm using on turtle.com where you can see it working in real time including some asynchronous loading let me please know if you end up using my solution and post in the comments if you have success or if you have any questions and need help have a nice day and see you with the next video you

Channel: 7urtle JavaScript

Views: 643

Rating: 5 out of 5

Keywords: React, React Router, JavaScript, 7urtle

Id: 4egJVmGGanA

Length: 12min 40sec (760 seconds)

Published: Wed Jun 16 2021