I recently ran into an error in my Storybook environment that read: useNavigate() may be used only in the context of a component. It took me a moment to understand why this was happening, and I want to share how I solved it.
Thank me by sharing on Twitter 
Error: useNavigate() may be used only in the context of a component.
Why This Error Occurs
I discovered that Storybook doesn’t automatically provide a React Router context. When I used useNavigate(), React expected my component to be nested inside a <Router> component, but Storybook had no router set up by default. Consequently, it complained that I was calling useNavigate() outside a router.
How I Wrapped My Component in a Router
To fix the issue, I wrapped the story in a <MemoryRouter> decorator. This way, my component could use all the router hooks, including useNavigate(). Here’s a simplified example:
import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
import { MemoryRouter } from "react-router-dom";
import MyComponent from './MyComponent';
const meta = {
title: "Examples/MyComponent",
component: MyComponent,
tags: ["autodocs"],
parameters: {
layout: "fullscreen",
},
args: {
onLogin: fn(),
onLogout: fn(),
onCreateAccount: fn(),
},
decorators: [
(Story) => (
<MemoryRouter>
<Story />
</MemoryRouter>
),
],
} satisfies Meta<typeof MyComponent>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Basic: Story = {};
Once I added this decorator, Storybook provided the same router context I would normally have in a standard React application. I was then free to call useNavigate() without errors.
SanDisk 256GB Ultra microSDXC UHS-I Memory Card with Adapter - Up to 150MB/s, C10, U1, Full HD, A1, MicroSD Card - SDSQUAC-256G-GN6MA [New Version]
$19.99 (as of April 15, 2025 14:43 GMT +00:00 - More info)
HP 65 Black Ink Cartridge | Works with HP AMP 100 Series, HP DeskJet 2600, 3700 Series, HP ENVY 5000 Series | Eligible for Instant Ink | N9K02AN
(as of April 15, 2025 14:43 GMT +00:00 - More info)
Brother Genuine Standard Yield Toner Cartridge, TN730, Replacement Black Toner, Page Yield Up To 1,200 Pages, Amazon Dash Replenishment Cartridge,1 Pack
$47.98 (as of April 15, 2025 14:43 GMT +00:00 - More info)Verifying My Fix
After I refreshed Storybook, the error disappeared. The navigation logic within my component worked as expected, and I confirmed that my stories still rendered correctly.
Final Thoughts
By wrapping my stories with a <MemoryRouter>, I ensured that any calls to useNavigate() had the proper context. This small change saved me a lot of time and kept my Storybook environment aligned with my production setup. I hope my experience helps anyone else who faces the same challenge.
