错误：不变失败：您不应在 <Router> 之外使用 <Link> (storybookjs)

Question

它以某种方式正常工作react-scripts start。但是当尝试通过故事书查看各个组件时，它会抛出一个错误，就像上面标题中所说的那样。

\n\n

这是我的代码。

\n\n

index.tsx

\n\n

import React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport \'./index.css\';\nimport App from \'./App\';\nimport * as serviceWorker from \'./serviceWorker\';\n\n\nReactDOM.render(<App />, document.getElementById(\'root\'));\n

\n\n

App.tsx

\n\n

import React from \'react\';\nimport\xc2\xa0{\xc2\xa0BrowserRouter,\xc2\xa0Route,\xc2\xa0Switch, Link\xc2\xa0}\xc2\xa0from\xc2\xa0"react-router-dom";\nimport { Register } from \'./pages/register/register\'\nimport { Login } from \'./pages/login/login\'\nimport { Home } from \'./pages/home/home\'\n\nconst App: React.FC = () => {\n  return (\n    <div id="app-root">\n      <BrowserRouter>\n        <Switch>\n          <Route path="/" exact component={Home} />\n          <Route path="/register" exact component={Register} />     \n          <Route path="/login" exact component={Login} />\n        </Switch>\n      </BrowserRouter>\n    </div>\n  );\n}\n\nexport default App;\n

\n\n

login.tsx

\n\n

export const Login = () => {\n   return (\n        <div className={styles.loginPage}>\n            <div className={styles.body}>\n                <div>\n                    <Link to="/" className={styles.link}> \n                        <img src={arrowImage} className={styles.arrowImage} alt="arrowImage" />\n                    </Link>\n                </div>\n            </div>\n        </div>\n   )\n};\n

\n\n

其他两个组件Home实际上Register具有相同的代码，login.tsx只是名称不同。由于某种原因，它可以在普通浏览器上运行，但是当我使用组件运行故事书时，它会显示错误。我很困惑我不确定我错过了什么，因为它可以在没有故事书的普通浏览器上运行。

\n\n

故事书截图：https://user-images.githubusercontent.com/24859633/69216293-d38e0c80-0ba6-11ea-8434-201041f30af7.png

\n

Answer 1

看起来像“afholderman”的建议： https://github.com/storybookjs/storybook/issues/8892#issuecomment-580842862

import {MemoryRouter} from 'react-router-dom';
...
<MemoryRouter>
    <Link to="/" className={styles.link}> 
        <img src={arrowImage} className={styles.arrowImage} alt="arrowImage" />
    </Link>
</MemoryRouter>
....