Say Goodbye to Redux Toolkit and Context API

When working with nested routes in React applications, sharing data between parent and child routes used to require extensive prop drilling or setting up complex contexts. But with React Router’s useOutletContext hook, this process has become much simpler. Let’s dive into how this hook works and why it’s a game-changer for building cleaner, more efficient React applications.

The useOutletContext hook is part of React Router and it is used in nested route components. It allows us to easily pass data from a parent route to its child routes without the need for prop drilling and other state management tools. This is especially useful in layouts or when building shared data or states across deeply nested routes.

One of the great things about useOutletContext is that it reduces the need for more complex state management tools, like the Context API or even Redux Toolkit, when it comes to sharing data across nested routes. For simpler cases, useOutletContext handles data sharing between parent and child routes seamlessly, allowing you to avoid additional setup and boilerplate code.

Example:

// Dashboard.js
import { Outlet } from 'react-router-dom';

const Dashboard = () => {
  const userData = { name: 'Jane Doe', email: '[e-mail]' };

  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet context={userData} />
    </div>
  );
};

export default Dashboard;

// Profile.js
import { useOutletContext } from 'react-router-dom';

const Profile = () => {
  const userData = useOutletContext();

  return (
    <div>
      <h2>Welcome, {userData.name}!</h2>
      <p>Email: {userData.email}</p>
    </div>
  );
};

export default Profile;

To make this work, configure your routes in the App.js or main routing file.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Dashboard from './Dashboard';
import Profile from './Profile';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="/profile" element={<Profile />} />
           // add other routes
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Now, any nested route under /dashboard will automatically have access to the userData context. This means you can define as many child routes as needed, and they will all be able to access userData without any additional setup.

For example, if you add routes like /dashboard/settings or /dashboard/activity, these routes can also use useOutletContext to access the userData directly.