A React Router tutorial which teaches you how to use Nested Routes with React Router 7 . The code for this React Router v7 tutorial can be found over here . Nested Routes are a powerful feature. While most people think React Router only routes a user from page to page, it also allows one to exchange specific fragments of the view based on the…

A React Router tutorial which teaches you how to use Lazy Loading with React Router 7 . The code for this React Router v7 tutorial can be found over here . Lazy Loading on route level with React Router is a powerful feature. Usually a client-side rendered React applications comes as one bundle from a web server. However, when enabling lazy…

A React Router tutorial which teaches you how to use Authentication in React Router 7 . The code for this React Router v7 tutorial can be found over here . We will start off with a minimal React project that uses React Router to navigate a user from one page to another page. In the following function component , we have matching Link and Route…

A quick React Router 7 example which should get you up and running. The code for this React Router v7 tutorial can be found over here . The example features the matching between Routes and Links, a so-called Layout Route for encapsulating components within the same layout (see Layout component), a so-called Index Route loaded with the Home…

A React Router tutorial which teaches you how to perform a Redirect in React Router 7 . The code for this React Router v7 tutorial can be found over here . We will start off with a minimal React project that uses React Router to navigate a user from one page to another page: In this function component we have matching Link and Route components…

Private Routes in React Router (also called Protected Routes ) require a user being authorized to visit a route (read: page). So if a user is not authorized for a specific page, they cannot access it. The most common example is authentication in a React application where a user can only access the protected pages when they are authorized (which…

A React Router tutorial which teaches you how to use React Router 7 . The code for this React Router v7 tutorial can be found over here . In order to get you started, create a new React project (e.g. Vite ). Afterward, install React Router : The first implementation detail will be telling our React application that we want to use React Router…

React Function Components, also known as React Functional Components , are the status quo for writing modern React applications. In the past, there have been various React Component Types , but with the introduction of React Hooks it's possible to write your entire application with just functions as React components. This in-depth guide shows you…

In a server-driven React world with Server Components and Server Actions, the frontend is seamlessly and type-safely connected to the backend. Since providing server-side feedback is inevitable, whether for authorization, authentication, or other business logic, it makes sense to extend this approach to form validation too. That's why my approach…