React Router Interview Questions
With Answers & Code Examples

import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';

// Route definition — v6 syntax
function App() {
  return (
    
      
        }>
          } />
          } />
          } />
          } />
        
      
    
  );
}

// Layout component — Outlet renders matched child route
function Layout() {
  return (
    

      
  );
}

Key hooks:

// Navigate programmatically
const navigate = useNavigate();
navigate('/users/123');
navigate(-1); // go back

// Route params — /users/:id
const { id } = useParams();

// Query string — /users?tab=active
const [searchParams, setSearchParams] = useSearchParams();
const tab = searchParams.get('tab');

// Current location
const location = useLocation();
console.log(location.pathname, location.search, location.state);

// ─── Option 1: Wrapper component ─────────────────────────────────────────────
function ProtectedRoute({ children }) {
  const { user } = useAuth();
  const location = useLocation();

  if (!user) {
    // Redirect to login, save the page they tried to visit
    return ;
  }

  return children;
}

// Usage

    
  
} />

// ─── Option 2: Layout route (cleaner for many protected routes) ───────────────
function RequireAuth() {
  const { user } = useAuth();
  const location = useLocation();

  if (!user) {
    return ;
  }

  return ; // render the matched child
}

// Wrap all protected routes under one parent

  } />
  }>          {/* no path — just a guard */}
    } />
    } />
    } />
  


// After login — redirect to original destination
function Login() {
  const navigate = useNavigate();
  const location = useLocation();
  const from = location.state?.from?.pathname || '/dashboard';

  async function handleLogin(creds) {
    await login(creds);
    navigate(from, { replace: true }); // replace so back button works
  }
}