Відео

how about loading scripts when loading those other html files? I am having a problem with setting innerHTML and the JS not working with fetched HTML files.

Vanilla js routing

THIS HELP SO MUCH! THANK'S

Load big html css it goes slow

How to have dynamic urls, like /blogs/1 for example?

To anyone trying to dynamically load javascript files to the different pages ..... read below This video is awesome and the router works as intended, but when I was trying to get an element by ID (for example) of part of the html that hadn't been loaded yet I couldn't get it to work. I tried multiple things and finally found a really good solution I think. I'm linking my router.js file on my current project so you can see what it looks like, but basically each "page" I'm routing to is in a subdirectory with a css and js file. The <link> tag works for the css so that part is fine, but the <script> tag wouldn't work. I tried putting the code directly in the tag (it's rendered via innerHTML so that isn't allowed). I tried dynamically inserting it into a <script> tag on the index.html page but that didn't work either. The solution here is that I build a new <script> tag with the correct src and then replace the one currently on index.html. If you use appendChild it works too, but you'll have 30 <script> tags before you know it. Also, you can add script.type = "module" on the handleLocation function in router.js so that you can use imports, but then I found that it only renders once and then never again. github.com/fughesi/BloomingGeckos.com/blob/main/client/router.js

This 3 minute clip just saved me from learning Angular, React, Node.js and TypeScript. I know there are quite a bit differences, but for my purpose this is exactly what i needed, thanks! :D

can u create a dynamic route in vanilla js ? example: /detail/:id --> show id in screen

Thanks a lot

surprisingly, i found a very clear usecase of vanilla js for routing from non indian youtuber

Can I run this as a static website from S3 or does it need a server to render files?

awesome, simple and clear solution

Yeah bro its work thankyou

very nice! though your example does not demonstrate the advantages of client-side routing over server-side routing? fetch still grabs the entire contents of the 3 pages, every time a link is clicked?

thank you very much

How i can use ejs instead html for SPA?

Thank you

Very concise! I am confused where you’re fetching the html for each page from and how there are two const route variables initialized? Assume it has something to do with async/await concepts I haven’t learned yet 😂

window.event is deprecated, I don't found any alternative.

Great video, Mitch Dev. Thank you for such a nice and simple video! It's much better to get everything you need for less than 4 minutes than watching my professor's 1.5h lecture which would give me no idea what is going on.

still cant get why do we need route function Looks like ive got why we need route function. So if we have <a></a> buttons then we just set click event on them and call route function in callback function, right?

how if in html run javascript fuction and fetch api? like product page?? please tutorial?

Fetch is too slow. Just use template literals and innerHTML

Exactly what I was looking for, works great, you the man!

Heeelp!!, How can I use it with parameters?

thanks for the tutorial. unfortunately on refresh it throws a "Cannot GET" message

Thanks for your video. From your code, I can see that handleLocation function is mannuallly triggered in route() function. where it should be triggered by pushState().

is just that u need an extended knowledge of js to do this.... thank you very much

wow! Wonderfu

Making the clone of Spotify using only vanilla js , this is my favourite video , thanks bro, love from India

I wanted かめりあ - Routing SPA what is this youtube

no matter what I do, it will navigate to the other page loosing everything.

What does window.route = route do?

that URL scheme will cause 404 errors, you need to rewrite all requests to the index or redirect 404s to the index, or just use Hashes instead

Great tutorial! Thanks!

I did it all , links are working but when I add '/about' to my website url it says page not found 404 ( not my own 404 page )

Hi Mitch, thanks for this video. Maybe could you do the same with a vanilla js created with vite?

This tutorial is just awesome, but in my case, when I refreshe the page in any of the routes (that is not the home), it just doesnt load.. I see the message: "Cannot GET"

This vidéo is great ,direct and clear . Thank's it helped a lot

Such a straightforward implementation of vanilla JS routing. THANKS! i had already looked at several tutorials attempting the same. They were across the board clunky and, at times, arcane (at least to me). You saved me many hours of frustration and aggravation.

Hello friend, I tried to use this method for a SPA and it worked perfectly, but when I want to use images as "a", the "oneclick" does not work and it is only possible to access the "a" by clicking around the img. But it doesn't work if you click inside it. Any advice on how to solve this? I have very little idea of js, so I'm stuck with this problem.

How can we write a localhost without any framework or packages in vanilla Javascript? I can nowhere on the internet on how to do that?

is window.route = route; neccessary? If neccessary, what for?

Thank you for this great contribution, simple and perfect explanation.

Thx.

This is an awesome video. Thank You.👏

is scrolling to an id still posible?

It's so nice, clear and perfect this video. However, I would like to know what will happen if we refresh the page ? i.e « If I'm on (about page) then I refresh, it will go back (to index page) ? »

Edit: Solved - if you are using webpack, remember to set historyApiFallback: true, in the devServer Hey Mitch, how can I serve the right page to the URL on page refresh? For example if I navigate to /blog and refresh the page I would get a 404. I have set things up with webpack and all seems to work, just not on page refresh. Cheers

that's beautiful