typescript - 错误:不变量失败:您不应该在外部使用(故事书)
问题描述
它以某种方式正常工作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
只是名称不同。出于某种原因,它可以在普通浏览器上运行,但是当我使用组件运行故事书时,它会显示错误。我很困惑我不确定我错过了什么,因为它在没有故事书的普通浏览器上工作。Register
login.tsx
解决方案
看起来像是来自“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>
....
推荐阅读
- php - Visual Studio Code 1.56 PHP 验证不起作用
- javascript - 如何在不修改组件本身的情况下将边距应用于 React 组件?
- python - 使用 Python 请求刷新令牌始终响应 403
- spring - 为什么配置类会与自身形成循环依赖?
- ios - 从子视图设置 StateObject 值会导致 NavigationView 弹出所有视图
- visual-studio-code - VSCode Prettier 不尊重保存时格式化的 Require Config 选项
- ssl - Bitbucket 部署,通过 [my-public-ip] 端口 22 重置连接
- java - 实际上是什么 ServletConfig config=null; 在下面的代码中
- c# - ASP.NET 4.8 - 如何让类在自己的实例中运行?
- excel - vbNewLine 直到双击才反映?