Client-Side Routing

Look, if you've ever dealt with this in production, you know exactly what the problem is. Now that our backend is secure, we return to the React frontend. Because React is a Single Page Application (SPA), it does not request new HTML files from the server when the user clicks a link. Instead, we use a library called react-router-dom. This library intercepts URL changes in the browser and dynamically mounts or unmounts React components to simulate multiple pages. This makes navigation instantaneous without any annoying screen flickering. This isn't just academic theory—understanding the *why* behind this is what separates junior devs from senior engineers. When you deploy a full-stack JavaScript app, this is the mechanic that prevents catastrophic failure.

Look, if you've ever dealt with this in production, you know exactly what the problem is. In a traditional website, you use the HTML <a href='/about'> tag to navigate. In a React SPA, using an anchor tag is a critical mistake! Clicking an <a> tag forces the browser to send a completely new request to the server, destroying all your React state (like your JWT token or shopping cart data). Instead, you MUST use the <Link to='/about'> component provided by react-router-dom. This component changes the URL silently and tells React to re-render the appropriate view. This isn't just academic theory—understanding the *why* behind this is what separates junior devs from senior engineers. When you deploy a full-stack JavaScript app, this is the mechanic that prevents catastrophic failure.

Look, if you've ever dealt with this in production, you know exactly what the problem is. Sometimes, you need to change the page *without* the user clicking a link. For example, after a user successfully submits a login form, you want to automatically redirect them to their dashboard. React Router provides the useNavigate() hook for this exact purpose. It returns a function that you can call with a specific path (navigate('/dashboard')). This allows you to execute complex asynchronous logic (like await fetch(...)) before deciding where the user should go next. This isn't just academic theory—understanding the *why* behind this is what separates junior devs from senior engineers. When you deploy a full-stack JavaScript app, this is the mechanic that prevents catastrophic failure.

Look, if you've ever dealt with this in production, you know exactly what the problem is. While our backend API is secure, the frontend UI is not. If a user manually types /create-post in the URL bar, React Router will happily render the CreatePost component, even if they aren't logged in! To fix this, we create a 'Private Route' wrapper component. This component checks a global state variable (like user). If the user exists, it renders the protected component. If the user does not exist, it instantly uses Navigate to bounce them back to the login page. This isn't just academic theory—understanding the *why* behind this is what separates junior devs from senior engineers. When you deploy a full-stack JavaScript app, this is the mechanic that prevents catastrophic failure.

Look, if you've ever dealt with this in production, you know exactly what the problem is. To use the PrivateRoute, we wrap our sensitive components inside our App.js router configuration. The Route component takes an element prop. Instead of passing <CreatePost /> directly, we pass <PrivateRoute><CreatePost /></PrivateRoute>. Now, if someone manually types the URL /create, React hits the PrivateRoute first. But wait—how does the PrivateRoute know if the user is logged in across the entire application? We need a Global State manager, which we cover next. This isn't just academic theory—understanding the *why* behind this is what separates junior devs from senior engineers. When you deploy a full-stack JavaScript app, this is the mechanic that prevents catastrophic failure.

Client-Side Routing. Now that our backend is secure, we return to the React frontend. Because React is a Single Page Application (SPA), it does not request new HTML files from the server when the user clicks a link. Instead, we use a library called react-router-dom. This library intercepts URL changes in the browser and dynamically mounts or unmounts React components to simulate multiple pages. This makes navigation instantaneous without any annoying screen flickering.

Navigating with Link. In a traditional website, you use the HTML <a href='/about'> tag to navigate. In a React SPA, using an anchor tag is a critical mistake! Clicking an <a> tag forces the browser to send a completely new request to the server, destroying all your React state (like your JWT token or shopping cart data). Instead, you MUST use the <Link to='/about'> component provided by react-router-dom. This component changes the URL silently and tells React to re-render the appropriate view.

Why is it absolutely forbidden to use standard HTML <a href='/page'> tags for internal navigation within a React Single Page Application?

• →It triggers a full page reload, destroying React state.
• →Anchor tags are deprecated in HTML5.

Programmatic Navigation. Sometimes, you need to change the page *without* the user clicking a link. For example, after a user successfully submits a login form, you want to automatically redirect them to their dashboard. React Router provides the useNavigate() hook for this exact purpose. It returns a function that you can call with a specific path (navigate('/dashboard')). This allows you to execute complex asynchronous logic (like await fetch(...)) before deciding where the user should go next.

Building Private Routes. While our backend API is secure, the frontend UI is not. If a user manually types /create-post in the URL bar, React Router will happily render the CreatePost component, even if they aren't logged in! To fix this, we create a 'Private Route' wrapper component. This component checks a global state variable (like user). If the user exists, it renders the protected component. If the user does not exist, it instantly uses Navigate to bounce them back to the login page.

What is the primary purpose of building a PrivateRoute wrapper component in a React application?

• →To block unauthorized access to specific UI views.
• →To automatically encrypt data on the page.

Applying Private Routes. To use the PrivateRoute, we wrap our sensitive components inside our App.js router configuration. The Route component takes an element prop. Instead of passing <CreatePost /> directly, we pass <PrivateRoute><CreatePost /></PrivateRoute>. Now, if someone manually types the URL /create, React hits the PrivateRoute first. But wait—how does the PrivateRoute know if the user is logged in across the entire application? We need a Global State manager, which we cover next.