React: Client-Side Routing
Using React Router to Implement Client-Side Routing
What is client-side routing
Client-side routing happens when the route is handled by the front end code (Javascript/JSX) that is loaded on the page. When a link is clicked, the route will be changed in the URL but the server request is prevented. The url will be changed by the state. This change in state will result in a different view of the webpage.
Let’s look at a real-world example, let’s say you have an application that allows you to view your blogs, your profile page, and your drafts. Each of those pages is a different view of the same SPA (single page application). With Client-Side routing, you’ll get the data you need to be able to render all of those pages on the first-page load. When a user clicks to view their drafts, the content is already ready to go, and therefore it will render faster than if you were making a request to the server for that page.
Speed is the major benefit of client-side routing. We make only one request to the server and so we don’t have to wait around for the server to get back to us. Everything is stored on the client-side and accessible to us as we need it.
Note: Our whole page will not refresh when using client-side routing. Instead, only the elements on the…
