@storybook/router

What is @storybook/router?

@storybook/router is a package used within the Storybook ecosystem to handle routing. It provides utilities to manage navigation and URL state within Storybook, making it easier to create and manage complex story hierarchies and navigation patterns.

What are @storybook/router's main functionalities?

Route Handling

The Route component allows you to define a route and associate it with a specific component. This is useful for rendering different components based on the URL path.

import { Route } from '@storybook/router';

<Route path="/my-component" component={MyComponent} />;

Link Component

The Link component is used to create navigational links within Storybook. It helps in navigating to different routes defined in the Storybook environment.

import { Link } from '@storybook/router';

<Link to="/my-component">Go to My Component</Link>;

Location Context

The Location component provides access to the current location object, which includes information like the current pathname. This is useful for conditionally rendering content based on the current route.

import { Location } from '@storybook/router';

<Location>{({ pathname }) => <div>Current path: {pathname}</div>}</Location>;

Other packages similar to @storybook/router

react-router

React Router is a popular library for handling routing in React applications. It provides a comprehensive set of tools for managing navigation, URL parameters, and nested routes. Compared to @storybook/router, React Router is more feature-rich and is designed for general use in React applications, not just within Storybook.

reach-router

Reach Router is a smaller, simpler alternative to React Router. It focuses on accessibility and simplicity, making it a good choice for projects that don't need the full feature set of React Router. Like React Router, it is designed for general use in React applications, whereas @storybook/router is specifically tailored for Storybook.

README

Storybook Router

Storybook Router is a wrapper library for react-router. It ensures a single version of the router is used everywhere. It also includes some ready to use utils to read the path, query, viewMode and storyId from location.

Changelog

7.0.23

• Core: Fix compat by disabling name mangling in esbuild require - #22486, thanks @youngboy!
• Core: Prebundle node-logger and make it CJS only - #23109, thanks @ndelangen!
• NextJS: Fix fonts not loading with 3+ words in name - #23121, thanks @ygkn!
• Telemetry: Count onboarding stories - #23092, thanks @shilman!