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 quick React Router 6 example which should get you up and running. The code for this React Router v6 tutorial can be found over here . In order to get you started, create a new React project (e.g. create-react-app ). Afterward, install React Router and read the following React Router tutorial to get yourself aligned to what follows next. The…
A React Router tutorial which teaches you how to perform a Redirect in React Router 6 . The code for this React Router v6 tutorial can be found over here . In order to get you started, create a new React project (e.g. create-react-app ). Afterward, install React Router and read the following React Router tutorial to get yourself aligned to…
A React Router tutorial which teaches you how to use Authentication in React Router 6 . The code for this React Router v6 tutorial can be found over here . In order to get you started, create a new React project (e.g. create-react-app ). Afterward, install React Router and read the following React Router tutorial to get yourself aligned to…
A React tutorial about event bubbling and capturing. Most JavaScript developers may be already familiar with this topic, because it origins in JavaScript and its DOM API. However, in this article, I want to give some of guidance for event bubbling and capturing in React . An event handler in React can be used to listen to a specific event (e.g. on…
A neat custom React Hook that I used in some of my React freelance projects which checks if an element's content has overflow (here: vertical overflow): If you want to detect a horizontal overflow instead, you can exchange the hasOverflow assignment to the following: In a function component , the custom React hook can be used this way: The…
A React Router tutorial which teaches you how to use Search Params with React Router 6 . The code for this React Router v6 tutorial can be found over here . In order to get you started, create a new React project (e.g. create-react-app ). Afterward, install React Router and read the following React Router tutorial to get yourself aligned to…
A React Router tutorial which teaches you how to use Nested Routes with React Router 6 . The code for this React Router v6 tutorial can be found over here . In order to get you started, create a new React project (e.g. create-react-app ). Afterward, install React Router and read the following React Router tutorial to get yourself aligned to…
A React Router tutorial which teaches you how to use React Router 6 . The code for this React Router v6 tutorial can be found over here . In order to get you started, create a new React project (e.g. create-react-app ). Afterward, install React Router by following the official instructions from their documentation. The first implementation…
A short React tutorial by example for beginners about using a radio button in React. First of all, a radio button is just an HTML input field with the type of radio which can be rendered in React's JSX: What may be missing is an associated label to signal the user what value is changed with this radio button: In your browser, this radio button can…
