Question

它以某种方式适用于常规react-scripts start。但是，当尝试通过故事书查看单个组件时，会在上面的标题上抛出一个类似sayd的错误。

这是我的代码。

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只是名称不同。由于某种原因，它可以在普通浏览器上运行，但是当我运行带有组件的Storybook时，会显示错误。我很困惑，我不确定我错过了什么，因为它可以在没有故事书的普通浏览器上正常工作。

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

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>
....

错误：不变式失败：您不应在<Router>之外使用<Link>（storybookjs）

1 个答案: