首页 > 解决方案 > 错误:不变量失败:您不应该在外部使用(故事书)

问题描述

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

这是我的代码。

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';


ReactDOM.render(<App />, document.getElementById('root'));

App.tsx

import React from 'react';
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";
import { Register } from './pages/register/register'
import { Login } from './pages/login/login'
import { Home } from './pages/home/home'

const App: React.FC = () => {
  return (
    <div id="app-root">
      <BrowserRouter>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/register" exact component={Register} />     
          <Route path="/login" exact component={Login} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

login.tsx

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

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

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

标签: typescriptreact-router-v4react-router-domstorybook

解决方案


看起来像是来自“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>
....

推荐阅读