React Router and Navigation
Implement client-side routing. Learn Route definitions, dynamic parameters, route guards, navigation links, and history hooks.
Downloaded from PrepIQ (https://prepiq.online)
Q1. What is React Router and how do you set it up?
// React Router v6
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
<Route path='/user/:id' element={<User />} />
</Routes>
</BrowserRouter>
);
}
// Using Link
import { Link } from 'react-router-dom';
function Navigation() {
return (
<nav>
<Link to='/'>Home</Link>
<Link to='/about'>About</Link>
</nav>
);
}Q2. How do you handle dynamic routes?
// Dynamic route parameters
<Route path='/user/:id' element={<User />} />
// Access parameters
import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams();
return <h1>User {id}</h1>;
}
// Optional parameters
<Route path='/user/:id?' element={<User />} />
// Multiple parameters
<Route path='/posts/:id/comments/:commentId' element={<Comment />} />Q3. How do you handle query parameters?
import { useSearchParams } from 'react-router-dom';
function SearchPage() {
const [searchParams, setSearchParams] = useSearchParams();
const query = searchParams.get('q');
const handleSearch = (value) => {
setSearchParams({ q: value });
};
return <input onChange={(e) => handleSearch(e.target.value)} />;
}Q4. How do you handle redirects and navigate?
import { useNavigate } from 'react-router-dom';
function LoginForm() {
const navigate = useNavigate();
const handleLogin = async () => {
// login logic
navigate('/dashboard');
};
}
// Redirect old routes
<Route path='/old' element={<Navigate to='/new' />} />Q5. How do you create protected routes?
function ProtectedRoute({ isAuthenticated, children }) {
return isAuthenticated ? children : <Navigate to='/login' />;
}
// Usage
<Route
path='/dashboard'
element={
<ProtectedRoute isAuthenticated={isLoggedIn}>
<Dashboard />
</ProtectedRoute>
}
/>React Router and Navigation
Implement client-side routing. Learn Route definitions, dynamic parameters, route guards, navigation links, and history hooks.
What is React Router and how do you set it up?
// React Router v6 import { BrowserRouter, Routes, Route } from 'react-router-dom'; function App() { return...
How do you handle dynamic routes?
// Dynamic route parameters <Route path='/user/:id' element={<User />} /> // Access parameters import { usePa...
How do you handle query parameters?
import { useSearchParams } from 'react-router-dom'; function SearchPage() { const [searchParams, setSearchP...
How do you handle redirects and navigate?
import { useNavigate } from 'react-router-dom'; function LoginForm() { const navigate = useNavigate();...
How do you create protected routes?
function ProtectedRoute({ isAuthenticated, children }) { return isAuthenticated ? children : <Navigate to='/...