How to use React Router for navigation
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Using React Router for navigation enables single-page application routing with dynamic component rendering and client-side navigation without page reloads. As the creator of CoreUI with extensive React development experience since its early versions, I’ve implemented React Router in countless enterprise applications and component libraries. From my expertise, the most effective approach is configuring routes with BrowserRouter, defining route components, and using navigation hooks for programmatic routing. This pattern provides seamless user experiences with fast navigation and proper browser history management.
Use BrowserRouter, Routes, and Route components to configure client-side navigation with dynamic component rendering.
import { BrowserRouter, Routes, Route, Link, useNavigate } from 'react-router-dom'
function App() {
return (
<BrowserRouter>
<nav>
<Link to='/'>Home</Link>
<Link to='/about'>About</Link>
<Link to='/contact'>Contact</Link>
</nav>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
<Route path='/contact' element={<Contact />} />
<Route path='/user/:id' element={<UserProfile />} />
<Route path='*' element={<NotFound />} />
</Routes>
</BrowserRouter>
)
}
function UserProfile() {
const navigate = useNavigate()
const handleGoBack = () => {
navigate(-1)
}
return (
<div>
<h1>User Profile</h1>
<button onClick={handleGoBack}>Go Back</button>
</div>
)
}
Here BrowserRouter provides routing context, Routes contains route definitions, and Route components map paths to elements. The Link component creates navigation links without page reloads, while useNavigate hook enables programmatic navigation. Dynamic routes like /user/:id capture URL parameters, and the catch-all route path='*' handles 404 pages.
Best Practice Note:
This is the same approach we use in CoreUI React applications for building complex navigation systems, dashboards, and enterprise user interfaces. Always wrap your app in BrowserRouter at the root level and use lazy loading with React.lazy() for route components to optimize bundle size and performance.
