How to use React Router v6 with Storybook
Mock react-router inside your stories
When developing components with react-router, you probably want them to work also inside your Storybook stories.
Out of the box, Storybook has no support for react-router, and you’ll see your components generating errors when you try to run them into a story.
Luckily, there is an easy fix for it, and it’s called Storybook Addon React Router v6. To make it work, you just need to install and use it as a decorator to add the router support for all the stories.
How to install
To install the Addon
To load it on Storybook
How to use it as a decorator
To make it work, the easiest way is to add the Addon as a decorator to your .storybook/preview.js.
This was my initial configuration
First, we load the Addon component withRouter, then we add it as a decorator
Make sure to restart your Storybook and we are done!
Additional configuration
The Addon allows for additional configurations that you can add as a global default on .storybook/preview.js
