解決方法: "Error: Invariant failed: You should not use <Link> outside a <Router>"

はじめに

react-router-hash-linkを使ってreactアプリを作っている時につまずいた備忘録です。

コード

React.js

import React, { Component } from 'react';
import { HashLink } from 'react-router-hash-link';

export default function hoge() {
    return (
        <HashLink to="./hoge#hoge" smooth>
            hoge
        </HashLink>
    )
}

エラー

console.log

Uncaught Error: Invariant failed: You should not use <Link> outside a <Router>
    at invariant (tiny-invariant.esm.js:10)
    at Link.js:84
    at updateContextConsumer (react-dom.development.js:18304)
    at beginWork (react-dom.development.js:18661)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at scheduleUpdateOnFiber (react-dom.development.js:21188)
    at updateContainer (react-dom.development.js:24373)
    at react-dom.development.js:24758
    at unbatchedUpdates (react-dom.development.js:21903)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
    at Object.render (react-dom.development.js:24840)
    at Module../src/index.js (index.js:8)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object.1 (serviceWorker.js:141)
    at __webpack_require__ (bootstrap:784)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

発生条件と解決方法

どうもstorybookはreact-routerに依存したサードパーティのコンポーネントを追加することを予期していないようで、対象コンポーネントをreact-router-domの<MemoryRouter/>で囲ってあげれば対応できるっぽいです。
また同様のことがreact-reduxの<Provider/>の外でconnectやuseSelecterを使った場合などにも生じるようです。

ただ今回は別にstorybookを使っているわけでもないのでとりあえず該当のコードを<Memoryrouter/>で囲うことで解決しました。

React.js

import React, { Component } from 'react';
import { MemoryRouter} from 'react-router-dom';
import { HashLink } from 'react-router-hash-link';

export default function hoge() {
    return (
        <MemoryRouter>
            <HashLink to="./hoge#hoge" smooth>
                hoge
            </HashLink>
        <MemoryRouter>
    )
}

storybookに追加する際のエラーでもこれと同様に<MemoryRouter/>で囲う他、addDecolatorを用いる方法もあるようです。以下の記事を参照してみてください。

参考

https://github.com/storybookjs/storybook/issues/8892
https://qiita.com/daikiojm/items/da3299d7b90d38194d85