@storybook/router

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>;