AI solution for Interview Question on BFE.dev
81. How does client-side routing work?

In client-side routing, the routing is handled by the browser itself rather than being handled by the server. When the user clicks on a link or enters a URL in the address bar, the browser handles the request and loads the relevant page without making a server request.

To achieve client-side routing, we use a client-side router which handles the routing within the browser itself. When a user clicks on a link, the router intercepts the request, matches the URL with the registered routes, and then loads the relevant component.

Browser Router: When using a BrowserRouter, the router uses the HTML5 History API to manipulate the browser’s history stack. It uses the pushState() method to push a new state to the history stack when a link is clicked, and the popstate event to detect when the user navigates back or forward.

HashRouter: A HashRouter, on the other hand, uses URL fragments (also known as hash) to manipulate the browser’s history stack. When a link is clicked, the router updates the hash fragment in the URL and the browser scrolls to the corresponding element on the page.

MemoryRouter: A MemoryRouter does not manipulate the browser’s history stack. It uses an in-memory history object to keep track of the current location and updates the URL in memory, rather than the address bar. This is useful for testing or building server rendering applications.

To write your own client-side router, you would need to handle routing by intercepting link clicks and detecting changes to the URL. You could use the pushState() method and popstate event to manipulate the browser’s history stack and update the URL, or use the onhashchange event if using fragments. Additionally, you would need to match the URL path to the registered routing paths and load the corresponding component.