Design Converter
Education
Last updated on Feb 14, 2025
•5 mins read
Last updated on Feb 14, 2025
•5 mins read
When building a React app, users expect smooth navigation between pages. That’s where routing comes in. React Router helps manage different routes in single-page applications. It updates the view without reloading the page, making navigation fast and seamless.
One key feature is the React Router Outlet. It allows you to render nested routes inside a parent component. This keeps your code organized and makes routing more flexible.
In this blog, we’ll look at how React Router works, how to set up nested routes, and how to use the outlet component for better structure.
Let’s get started!
React Router is a standard library used for managing routing in React applications. It enables you to create both simple and nested routes for rendering components based on the browser's current URL. The core components of React Router help define routes and manage transitions between them without reloading the page.
Key features of React Router:
The React Router Outlet (<Outlet>
) acts as a placeholder for child routes in a parent route component. It allows rendering of child components when the route path matches a child route. Without it, nested components wouldn’t render within the parent route element.
Example of using <Outlet>
:
1import React from 'react'; 2import { Outlet } from 'react-router-dom'; 3 4function Dashboard() { 5 return ( 6 <div> 7 <h1>Dashboard</h1> 8 <Outlet /> {/* This will render matching child routes */} 9 </div> 10 ); 11} 12 13export default Dashboard;
Here, the <Outlet>
serves as a placeholder for nested child routes, dynamically loading the corresponding component when the user navigates to a matching child route.
In React Router, nested routes allow for building a common layout structure that can share a navigation bar, sidebar, or footer across different pages. Nested child routes are wrapped inside a parent route element, with each child element rendered inside the outlet component.
Example of Nested Routes:
1import React from 'react'; 2import { BrowserRouter, Routes, Route } from 'react-router-dom'; 3import Dashboard from './Dashboard'; 4import Profile from './Profile'; 5import Settings from './Settings'; 6 7function App() { 8 return ( 9 <BrowserRouter> 10 <Routes> 11 <Route path="/dashboard" element={<Dashboard />}> 12 <Route path="profile" element={<Profile />} /> 13 <Route path="settings" element={<Settings />} /> 14 </Route> 15 </Routes> 16 </BrowserRouter> 17 ); 18} 19 20export default App;
In this example, /dashboard/profile
will render the Profile component inside the Dashboard component’s main content area using the <Outlet>
.
To use the outlet component, you need to import it from react-router-dom
:
1import { Outlet } from 'react-router-dom';
A well-structured routing system improves the maintainability of your entire application. Here’s how to organize routes effectively using a BaseLayout component for shared elements like headers and footers.
1import React from 'react'; 2import { Outlet } from 'react-router-dom'; 3import ProtectedRoute from './ProtectedRoute'; 4 5export default function BaseLayout() { 6 return ( 7 <div className="main-container d-flex position-relative"> 8 <header>App Header</header> 9 <ProtectedRoute> 10 <Outlet /> {/* Protected content will be rendered here */} 11 </ProtectedRoute> 12 <footer>App Footer</footer> 13 </div> 14 ); 15}
The BaseLayout component serves as a shared layout for multiple pages, ensuring common elements like headers and footers are automatically included.
In React Router DOM, each route path can have an element prop that specifies the component to render. Child routes are defined within a parent route to create nested routes.
1<Route path="/" element={<Home />} /> // Root path 2<Route path="/about" element={<About />} /> 3<Route path="/dashboard/*" element={<Dashboard />} />
A protected route is used to restrict access to certain pages. It checks the user's authentication status before rendering the route path element.
1import React from 'react'; 2import { Navigate } from 'react-router-dom'; 3 4function ProtectedRoute({ children }) { 5 const user = localStorage.getItem('user'); // Check user status 6 return user ? children : <Navigate to="/login" />; 7} 8 9export default ProtectedRoute;
It’s crucial to manage errors and fallback pages for robust routing. The ErrorBoundary component can help catch errors and display a custom message.
1import ErrorBoundary from './ErrorBoundary';
Use ErrorBoundary to wrap around your route paths to catch errors during navigation.
React Router-outlet helps you build scalable apps with ease. It keeps your routes organized and makes working with nested child routes simpler. By using protected routes and adding fallback pages for errors, you can improve the user experience. Don't forget to export your app properly to avoid issues. Remember to keep performance in mind throughout. Using React Router-outlet will make your app layout easier to manage and maintain.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.