Common React Router Mistakes That Break Navigation in React Apps

Common React Router Mistakes That Break Navigation in React Apps

React Router has a predictable set of beginner mistakes that break navigation or destroy the single-page experience. Here are the most common ones.

Using Anchor Tags Instead of Link

Plain anchor tags trigger a full page reload, which loses app state and defeats the single-page purpose. Always use Link or NavLink for internal navigation.

Forgetting to Wrap the App in a Router

Without a BrowserRouter at the root, Routes and Links have no router context and throw errors or do nothing.

Missing the Catch-All 404 Route

Without a catch-all route at the end, invalid URLs show a blank page. Always add a 404 route for graceful handling.

Wrong Route Order

Routes are matched in order in some setups. If a broader route comes before a more specific one, the broad route can swallow the specific. Use precise paths or let React Router v6 handle ranking.

Not Using Outlet in Layouts

Defining a layout without an Outlet means child routes have nowhere to render. Always include an Outlet where child content should appear.

Forgetting useParams in Dependencies

When a dynamic route changes, the component does not refetch if the id is missing from the useEffect dependency array, showing stale data.

Hardcoding URLs

Building URLs by string concatenation is error-prone. Use the Link component and let React Router handle the path, or use route-generating helpers.

The Takeaway

Most router bugs come from anchor tags, missing wrappers, missing 404, wrong order, missing Outlet, or stale useEffect. Fix these and navigation becomes reliable.