How to Implement React Router for Navigation

Install the react-router-dom package from npm. This package provides all the components and hooks needed for client-side routing in React web applications. After installation, no page reloads happen during navigation because React Router intercepts link clicks and renders the correct component.

Import BrowserRouter from react-router-dom and wrap your entire application with it, typically in your root index file. BrowserRouter uses the HTML5 History API to keep the UI in sync with the URL. Every routing component and hook you use must be inside this wrapper.

Import Routes and Route from react-router-dom. Inside your app, place a Routes component which acts as a container. Inside Routes, add individual Route components. Each Route has a path prop that defines the URL and an element prop that defines which component to render when that URL is active.

Use the Link component from react-router-dom instead of regular HTML anchor tags for navigation. Link prevents full page reloads and handles navigation through the History API. Pass the destination URL as the to prop. For navigation that should show an active state, use NavLink which applies an active class automatically.

To create routes that accept variable segments in the URL, use a colon followed by the parameter name in the path. For example, path equals '/product/:id' matches any URL like '/product/42'. The value after the slash is captured as a parameter that you can read inside the rendered component.

Inside a component rendered by a dynamic route, import and call useParams from react-router-dom. It returns an object containing all the URL parameters defined in the route path. Access the specific parameter by its name, for example const { id } = useParams(), and use it to fetch data or render content specific to that route.

Nested routes allow child components to render inside parent components at specific URL segments. Add child Route elements inside a parent Route. In the parent component, render an Outlet component from react-router-dom at the location where the child route should appear. When the URL matches a child path, the Outlet renders that child.

Add a Route with the path set to an asterisk at the end of your Routes container. This acts as a catch-all and renders your 404 component for any URL that does not match any defined route. To redirect programmatically, use the useNavigate hook which returns a function you call with the destination path.