<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div class="message-content" style="max-width:600px"> <p style="margin-bottom:1em">Single Page Applications. SPAs. </p> <p style="margin-bottom:1em">If you've heard those terms before you might be curious what they mean. Just one page? Eh?</p> <p style="margin-bottom:1em">Most web applications are going to consist of many html pages. You click a link, a new html page is loaded. The URL in your browser changes to reflect the location of that new page on a server.</p> <p style="margin-bottom:1em">Honestly, this is one of the big advantages of the web: sharable deep links. People want to share the article they just read? They just copy/paste the URL to their friend and that friend goes right to the article.</p> <p style="margin-bottom:1em">With React and other JavaScript tools this is often a bit different. Instead of changing a page, clicking on stuff executes some JS code and that dynamically updates the current HTML page that you are on.</p> <p style="margin-bottom:1em">It's kind of weird to think about, and can honestly "break the web" from how it was originally designed to work. If the URL doesn't update, then how can you share what page you're on?</p> <p style="margin-bottom:1em">So it's back to server-rendered HTML pages then? Not so fast! (Seriously, 100% server-rendered apps never feel as fast and snappy as JavaScript-based apps). This is one situation where we can have our cake and eat it too 🎂😋</p> <p style="margin-bottom:1em">This is where JavaScript client-side routers come in.</p> <p style="margin-bottom:1em">We want to build applications that give users that standard feel of using their browser and have it work as expected. We want the URL to update, pages to load, the back button to work correctly, etc. To do this, we will usually reach for some sort of <strong>client-side router.</strong></p> <p style="margin-bottom:1em">A router is a library written specifically to take the browser breaking weirdness out of a JavaScript driven web application and make it work properly and manage the current URL. It's a trick. A relatively complex trick 😬</p> <p style="margin-bottom:1em">To truly understand what a router is doing for you, I recommend <a href="https://click.convertkit-mail.com/e5u798qwlou0uqex48h8h863g022blh0r4q/x0hph3unlmvwl5u5/aHR0cHM6Ly91aS5kZXYvYnVpbGQteW91ci1vd24tcmVhY3Qtcm91dGVyLw==" style="margin:0px;padding:0px;border:0px;font-weight:inherit;font-style:normal;font-size:13px;line-height:inherit;font-family:inherit;color:rgb(0, 153, 204);text-decoration:none;" url-id="1385086603">clicking this link and learning how to build your own basic router</a>. At least read the article, it's only about 15 minutes to read top to bottom, but also consider building your own router and following along.</p> <p style="margin-bottom:1em">It's enlightening.</p> <p style="margin-bottom:1em">Now, throw that code away. Seriously, you don't want to build your own router. It's a difficult, perilous, bug-ridden, and thankless task.</p> <p style="margin-bottom:1em">The community standard is <code>react-router</code> and it is excellent. Great docs. Extremely mature. Widely used and deployed.</p> <p style="margin-bottom:1em">It's what you want.</p> <p style="margin-bottom:1em">Some meta-frameworks like Remix and Next.js are starting to use the file system for routing, and this is an interesting and welcome development for many projects.</p> <p style="margin-bottom:1em"><span style="">Let's talk more tomorrow!</span><br></p> <p style="margin-bottom:1em">Thanks!</p> <p style="margin-bottom:1em">Kent</p> <br> <br> <small> <a href="https://unsubscribe.convertkit-mail.com/e5u798qwlou0uqex48h8h863g022blh0r4q">Unsubscribe</a> | <a href="https://preferences.convertkit-mail.com/e5u798qwlou0uqex48h8h863g022blh0r4q">Update your profile</a> | P.O. Box 562, American Fork, Utah 84003 <br> </small> </div> <!-- --> <img src="https://open.convertkit-mail.com/e5u798qwlou0uqex48h8h863g022blh0r4q" alt=""> </body> </html>