Adjusting SVG lines by hand is a headache. You guess the x/y coordinates. You reload the browser. The line still doesn’t point where you want. You do it again. I built a free tool that solves this. What it does: Use cases: Privacy:100% client-side. Nothing uploaded. Try it: tools.kandz.me/svg-line-coordinates
1. Installation & Setup 2. File-Based Routing Conventions File Name URL Path __root.tsx Root layout index.tsx / about.tsx /about users.$id.tsx /users/$id posts.{-$month}.tsx /posts/{-$month} (optional) $.tsx /$ (splat/catch-all) _app.tsx Pathless layout (not in URL) 3. Root Route (Layout) 4. Navigation (Link & useNavigate) 5. Path Parameters (useParams) 6. Search Params (validateSearch) 7. Data Loaders 8. Pending…
The previous chapters covered the client-side route handling, the loaders, the actions, and the testing. This chapter covers the server-side rendering (SSR) and the hydration: the mechanism that renders the application on the server for the initial request, sends the HTML to the browser, and then “hydrates” the static HTML with the interactive React application….
The previous chapters covered the route configuration, the loaders, the actions, and the error boundaries. This chapter covers the testing: the verification that the routes render the correct components for the correct URLs, that the loaders fetch the correct data, that the actions mutate the state, and that the error boundaries catch the failures. The…
The previous chapters covered the route loaders, which fetch the data before the route renders, and the pending states, which show the loading UI. This chapter introduces the integration with TanStack Query, the dedicated data-fetching library that provides the caching, the background refetching, the mutations, and the invalidation. TanStack Router has its own loader mechanism,…
The previous chapters covered the route tree, the path parameters, and the data loaders. This chapter focuses on the structure that organizes those routes into a coherent application: the layout routes. A layout route is a route that renders a shared component (the navigation, the sidebar, the footer, the providers) around its child routes via…
The previous chapters covered the data loaders and the path parameters, which are the places where the runtime errors originate: the network failure, the invalid param, the missing resource. This chapter covers the mechanism that catches those errors and renders the fallback UI: the error components and the boundaries. In the TanStack Router, the route…
The previous chapters covered the data loaders and the form actions, which are the places where the runtime errors originate: the network failure, the missing resource, the validation failure, the unexpected exception. This chapter covers the mechanism that catches those errors and renders the fallback UI: the error boundaries. In the React Router, the route…
The previous chapter covered the pending states and briefly introduced the useFetcher hook as the local alternative to the global navigation. This chapter expands on the fetchers: the mechanism for loading and mutating the data without changing the route. The LFCS exam does not test React Router, but the front-end engineering certification paths do. The…
The previous chapter covered the form actions that handle the data mutations. This chapter covers the UI that appears while the action (or the loader) is in progress: the pending state. In the React Router’s Data mode, the useNavigation hook returns the current navigation state, which is the single source of truth for the pending…