Error: Invariant failed: You should not use <Link> outside a <Router>

[swoppy]

Describe the bug It throws an error when trying to view a components with react-router(s). However, components works fine with the normal react-scripts start

To Reproduce Steps to reproduce the behavior: view any components with react-router-dom

Expected behavior no errors

Code snippets If applicable, add code samples to help explain your problem.

Screenshots

System: System: OS: macOS 10.15.1 CPU: (4) x64 Intel(R) Core(TM) i5-5287U CPU @ 2.90GHz Binaries: Node: 10.16.2 - /usr/local/bin/node Yarn: 1.17.3 - /usr/local/bin/yarn npm: 6.9.0 - /usr/local/bin/npm Browsers: Chrome: 78.0.3904.97 Safari: 13.0.3 npmPackages: @storybook/addon-actions: ^5.2.4 => 5.2.4 @storybook/addon-links: ^5.2.4 => 5.2.4 @storybook/addons: ^5.2.4 => 5.2.4 @storybook/react: ^5.2.4 => 5.2.4

[swoppy]

for the meantime, this lib https://github.com/gvaldambrini/storybook-router mitigated the error

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[Hemant27031999]

Yes, the error still exist. If I try to use the Link component outside a Router, it throws the following error.

[mavenik]

I'm getting this too. Just bumping the comment thread to not let this go stale. Meanwhile, https://github.com/gvaldambrini/storybook-router has worked for me.

[afholderman]

This is not an issue with storybook, the error comes from react-router as is evidenced by the screenshots being posted. If you look at the source of https://github.com/gvaldambrini/storybook-router/blob/master/packages/react/react.js the fix is clear. Wrap the output of your story in a <MemoryRouter/> from react-router. To make this reusable write your own simple decorator:

export const withMemoryRouter = (story: any) => (
  <MemoryRouter>{story()}</MemoryRouter>
);

Storybook can't be expected to pull in and wrap third party library's wrappers. For example similar errors would occur with components that use connect or useSelector outside of a mocked react-redux <Provider/> or @material-ui theme functions outside of a <ThemeProvider/>.

[juanhelbert]

Same error for me. @afholderman solution worked perfectly.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[ghost]

Thanks @afholderman

Also we can simply use addDecorator method:

...
import { MemoryRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from '../../../../redux/store/connect';

storiesOf('common', module)
  .addDecorator(getStory => <Provider store={store}>{getStory()}</Provider>)
  .addDecorator(getStory => <MemoryRouter>{getStory()}</MemoryRouter>)
  .add('Component Name', () => <Component/>);

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

@nickzcv and for those of you using CSF:

import { MemoryRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from '../../../../redux/store/connect';

export default {
  title: 'common',
  decorators: [
    getStory => <Provider store={store}>{getStory()}</Provider>,
    getStory => <MemoryRouter>{getStory()}</MemoryRouter>,
  ]
}

export const ComponentName = () => <Component />;

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[josh231101]

I'm using styled components and get this error by creating an styled link, although if I create the styled componentn inside the index.js I get no error, why?