Handling /news vs /news/:id in React Router v7 Without Breaking Nested Routes
When working with React Router v7, a common scenario arises where you want /news itself to return a 404, while still keeping nested routes like /news/id/5 fully functional.
If you’re coming from v6, the good news is that v7 uses the same nested route structure, so the approach remains largely the same. Let’s walk through this step by step.
The Core Problem
If you only define:
<Route path="/news/*" element={<NewsRoutes />} />
/news→ Matches and rendersNewsRoutes(not what you want)./news/id/5→ Works fine.
If you comment it out:
{/* <Route path="/news/*" element={<NewsRoutes />} /> */}
then both /news and /news/id/5 break, because the router no longer has a rule for those paths.
The Correct Approach in v7: Nested Route Definitions
The key is to define /news as a parent route and handle the base path (/news) separately from its nested paths:
<Route path="/news">
<Route index element={<NotFound />} /> {/* Handles /news */}
<Route path="*" element={<NewsRoutes />} /> {/* Handles /news/* */}
</Route>
How it works:
/news→ Hits theindexchild, showing a 404 Not Found (or whatever fallback you define)./news/id/5→ Falls through to the*child, rendering yourNewsRoutescomponent.
This pattern ensures /news doesn’t load content incorrectly, while /news/:id and other dynamic routes still behave properly.
Example With a Reusable 404 Component
You’ll usually want a central 404 component:
function NotFound() {
return <h2>404 - Page Not Found</h2>;
}
<Route path="/news">
<Route index element={<NotFound />} />
<Route path="*" element={<NewsRoutes />} />
</Route>
React Router v7 Notes
- Same API as v6 for nested routes → v7 focuses on performance, data APIs, and React 18+ features, but the route definition syntax hasn’t changed, so the solution applies directly.
createRoutesFromElementsandcreateBrowserRouterstill work with this structure if you’re using data routers.- You can still use
<Navigate>for redirects (e.g., redirect/newsto/news/latestinstead of showing 404).
Other Considerations
- SEO Implications
/newsreturning a 404 is correct if it’s not a real page.- If you want Google to index
/newsas a category page, don’t use this setup—serve a landing page instead.
- User Experience
- This is often friendlier for users if
/newsdoesn’t stand on its own.
- This is often friendlier for users if
- Testing
Be sure to test all cases:/news→ 404 (or redirect)/news/id/5→ Works/news/unknown→ Handled byNewsRouteslogic- Unrelated routes → Still follow your global route rules
- Future-Proofing
If later you want/newsto show a list of articles, just swap out theNotFoundwith aNewsLandingPagecomponent—no breaking changes to nested routes.
Global 404 Catch-All
At the bottom of your routes, you’ll typically define:
<Route path="*" element={<NotFound />} />
You can reuse the same NotFound component inside /news for consistency.
Instead of a 404, you may prefer a redirect:
<Route path="/news">
<Route index element={<Navigate to="/home" replace />} />
<Route path="*" element={<NewsRoutes />} />
</Route>
Finally
With React Router v7, handling /news differently from /news/:id is simple:
- Use an
indexroute for the base/news. - Use a wildcard child route for
/news/*.
This gives you precise control, keeps nested routes working, and avoids SEO or UX pitfalls. The pattern is identical to v6, so you don’t need to relearn anything—just apply it consistently across your app.
Comments ()