ReactJS React Router Syllabus

What are query parameters and how do they differ from route (path) params?

Query parameters follow the ? in a URL (e.g. ?sort=asc&page=2) and carry optional key/value data; route params are named segments embedded in the path (/users/:id). Query params are not part of route matching.

Which hook reads and updates query parameters (the query string) in React Router v6?

useSearchParams(). It returns [searchParams, setSearchParams] where searchParams is a URLSearchParams instance.

Given const [searchParams] = useSearchParams(), how do you read the value of ?q=react?

searchParams.get('q') returns 'react'. It returns null if the parameter is absent. Use getAll('key') for repeated keys.

How do you update the query string with setSearchParams from useSearchParams?

Call setSearchParams with an object or URLSearchParams, e.g. setSearchParams({ page: '2', sort: 'asc' }). This updates the URL query and re-renders with the new params (a navigation, so it adds a history entry unless replace is set).

Which hook programmatically navigates the user to another route in React Router v6?

useNavigate(). const navigate = useNavigate(); then navigate('/dashboard') to go to a path.

What replaced the v5 useHistory hook (history.push) in React Router v6?

useNavigate. Instead of history.push('/x') you call navigate('/x'), and instead of history.replace('/x') you call navigate('/x', { replace: true }).

How do you navigate back and forward in the history stack with useNavigate?

Pass a number (a delta): navigate(-1) goes back one entry, navigate(1) goes forward one, navigate(-2) goes back two.

How do you replace the current history entry instead of pushing a new one when navigating?

Pass the replace option: navigate('/login', { replace: true }). This prevents the user from returning to the previous page via the back button.

How do you pass state to a route when navigating programmatically, and how is it read?

navigate('/path', { state: { from: 'home' } }) attaches state; the destination reads it with useLocation().state (e.g. location.state.from).

Which hook returns the current location object (pathname, search, hash, state)?

useLocation(). It returns an object with pathname, search, hash, state, and key, and re-renders on navigation.

What is a protected (private) route?

A route whose access requires a condition (usually authentication). If the user is not authorized, it renders a redirect to a login/other page instead of the protected content.

How do you implement a protected route as a wrapper component in React Router v6?

Create a component that checks auth and returns either the children (or <Outlet/>) or a <Navigate to="/login" replace />. Example: return isAuth ? <Outlet/> : <Navigate to='/login' replace />.

Which component declaratively performs a redirect when rendered in React Router v6?

<Navigate to="/path" />. Rendering it immediately changes the location, functioning as a redirect (it replaced v5's <Redirect>).

What replaced the <Redirect> component from React Router v5?

<Navigate>. Instead of <Redirect to="/login" /> you render <Navigate to="/login" replace />.

Why should a redirect in a protected route use the replace prop on <Navigate>?

So the redirect replaces the current entry rather than pushing a new one, preventing the user from clicking Back and returning to the protected page they were bounced from.

How can a protected route remember where the user was headed so it can return them after login?

Capture the current location and pass it in state on the redirect: <Navigate to="/login" state={{ from: location }} replace />. After login, navigate to location.state.from.

How do you create a catch-all 404 route in React Router v6?

Use a wildcard path: <Route path="*" element={<NotFound/>} />. It matches any URL that no other route matched.

What is the purpose of a custom route component?

To encapsulate reusable routing logic/behavior (auth checks, role checks, layout wrapping, logging) into a component you place around or in place of standard routes, keeping route definitions clean.

In React Router v6, why do custom wrapper components often render <Outlet/> instead of children?

When used as a parent route (e.g. <Route element={<RequireAuth/>}>...children...</Route>), the child routes render through <Outlet/>. Rendering children instead is used when the wrapper directly wraps a single element.

What is the difference between an absolute and a relative <Link to> value?

A leading slash (to="/users") is absolute from the domain root; without it (to="users") it is relative to the current route's path, appending to it.

How do you build links or navigation relative to the parent, going up one level?

Use .. in the to value: <Link to=".."> navigates up one route segment. In v6 relative resolution is based on the route hierarchy, and you can add relative='path' to resolve against the URL path instead.

What is the data router API introduced in React Router v6.4 and which function creates it?

The data APIs (loaders/actions) are enabled by createBrowserRouter, used with <RouterProvider router={router} />. This adds data loading, form actions, and error handling to routes.

What is a loader in React Router v6.4+ data routers?

A function attached to a route (loader) that fetches data before the route's component renders. The component reads it via useLoaderData(), enabling data to be ready on navigation.

Which hook accesses the data returned by a route's loader?

useLoaderData(). It returns whatever the matching route's loader function returned.

How do loaders perform redirects in React Router data routers?

By returning (or throwing) a redirect response from the redirect utility: return redirect('/login'). This is the loader-based equivalent of navigating/redirecting.

How do you programmatically read route params inside a loader function (not a component)?

Loaders receive an argument object with params: loader({ params }) => { params.userId }. Since loaders are not components, you cannot use the useParams hook there.

What order does React Router use when multiple routes could match the same URL in v6?

It ranks all routes by specificity (static segments beat dynamic :params, which beat splats *) and renders the single highest-ranked match, independent of declaration order.

How do you nest routing so a shared navbar/layout appears on many pages but only the inner content changes?

Define a parent layout route whose element contains the shared UI plus an <Outlet/>, then nest the page routes as its children so each renders inside the <Outlet/>.

What does the useNavigate returned function do when called with no target but an options object, e.g. navigate(0)?

navigate(0) refreshes/reloads the current route (re-runs the navigation to the same entry). Numeric deltas move through history; 0 stays on the current entry.

How can you preserve or merge existing query parameters when updating them with setSearchParams?

Read the current params first and build a new set: setSearchParams(prev => { prev.set('page','2'); return prev; }), or spread existing entries into a new object, since passing a plain object replaces the whole query string.