How do you implement protected routes?

Short answer: And either redirects or renders the requested route. import { Redirect, Route } from 'react-router-dom'; function ProtectedRoute({ component: Component, ...rest }) { const isAuthenticated = false; // Replace with your auth logic return ( <Route {...rest} render={(props) => isAuthenticated ? And either redirects or renders the requested route.

Example code

import { Redirect, Route } from 'react-router-dom'; function ProtectedRoute({ component: Component, ...rest }) { const isAuthenticated = false; // Replace with your auth logic return ( <Route {...rest} render={(props) => isAuthenticated ? nd either redirects or renders the requested route. Example: import { Redirect, Route } from 'react-router-dom'; function ProtectedRoute({ component: Component, ...rest }) { const isAuthenticated = false; // Replace with your auth logic return ( <Route {...rest} render={(props) => isAuthenticated ? ( <Component {...props} /> ) : ( <Redirect to="/login" /> } /> ); } function App() { return ( <Router> <Switch> <Route path="/login" component={Login} /> <ProtectedRoute path="/dashboard" component={Dashboard} /> </Switch> </Router> ); } In this example, if the user is not authenticated, they will be redirected to the login page when trying to access the /dashboard route. nd either redirects or renders the requested route. Example: import { Redirect, Route } from 'react-router-dom'; function ProtectedRoute({ component: Component, ...rest }) { const isAuthenticated = false; // Replace with your auth logic return ( <Route {...rest} render={(props) => isAuthenticated ? ( <Component {...props} /> ) : ( <Redirect to="/login" /> } /> ); } function App() { return ( <Router> <Switch> <Route path="/login" component={Login} /> <ProtectedRoute path="/dashboard" component={Dashboard} /> </Switch> </Router> ); } In this example, if the user is not authenticated, they will be redirected to the login page when trying to access the /dashboard route.

Real-world example (ShopNest)

ShopNest’s storefront is React: components for ProductCard, CartDrawer, and CheckoutForm, with hooks for local UI state.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.