CODEWITHSUNDEEP
javascriptroutes
Erick Christian
Erick Christian

Reputation: 108

How does a JavaScript front-end framework handle routing?

A few days ago I tried making a routing system with pure javascript without a framework
But I can only do it using hash

I know that you can use history.pushState
But then when I reload the page, the browser will think it's a different URL and send a GET request to that new URL
I also tried to intercept the request using a service worker, but that doesn't seem to work either

So, how can a JavaScript framework like Vue/React/Angular handle routing without hash and manage to redirect the request?

Upvotes: 1

Views: 278

Answers (1)

Quentin
Quentin

Reputation: 943769

But then when I reload the page, the browser will think it's a different URL and send a GET request to that new URL

Yes. That's the point.

pushState is a way of saying "I am changing the page with JavaScript. The state I'm changing it to is the same as you would get if you went to this URL.".

This lets bookmarks, search engines, and back/forward work.

So, how can a JavaScript framework like Vue/React/Angular handle routing without hash and manage to redirect the request?

They can't, at least not by themselves. You need something on the server to generate the page in the right state. e.g. a server-side rendering framework compatible with the frontend framework you are using.

Upvotes: 2

Related Questions