Como posso usar o livro de histórias com componentes que usa o roteador Reac
import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'
import Brand from './components'
const Logo = ({children}) => {
return (
<Link to='/'>
<Brand>
{children}
</Brand>
</Link>
)
}
Logo.propTypes = {
children: PropTypes.string.isRequired
}
export default Logo
Você deve envolver sua história em MemoryRouter
usando a função addDecorator
. Aqui está um trecho:
storiesOf('Logo', module)
.addDecorator(story => (
<MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
))
.add('normal', () => <Logo />)
Você pode ler um exemplo completo aqui: https://blog.hichroma.com/graphql-react-tutorial-part-5-6-ac36b6962a8a
Veja este comentário aqui se quiser links para disparar ações do Storybook: https://github.com/storybooks/react-storybook/issues/485#issuecomment -294105214
Estava procurando esse erro e tive dificuldade em encontrar esse problema porque ele foi postado em uma imagem. Colando o texto agora para tornar mais fácil para as pessoas encontrarem no futuro:
Não é possível ler o 'histórico' da propriedade de indefinido
TypeError: Não é possível ler o 'histórico' da propriedade de indefinido
em Link.render (http: // localhost: 9001 / static / preview.bundle.js: 52878: 35)
em http: // localhost : 9001 / static / preview.bundle.js: 43410: 21
em measureLifeCyclePerf (http: // localhost: 9001 / static / preview.bundle.js: 42690: 12)
em ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http: // localhost: 9001 / static / preview.bundle.js: 43409: 25)
em ReactCompositeComponentWrapper._renderValidatedComponent (http: // localhost: 9001 / static / preview.bundle.js: 43436: 32)
em ReactCompositeComponentWrapper.performInitialMount (http: // localhost: 9001 / static / preview.bundle.js: 42976: 30)
em ReactCompositeComponentWrapper.mountComponent (http: // localhost: 9001 / static / preview.bundle.js: 42872: 21)
em Object.mountComponent (http: // localhost: 9001 / static / preview.bundle.js: 4438: 35)
em ReactDOMComponent.mountChildren (http: // localhost: 9001 / static / preview.bundle.js: 42241: 44)
em ReactDOMComponent._createInitialChildren (http: // localhost: 9001 / static / preview.bundle.js: 40403: 32)
Recebo o erro abaixo ao usar MemoryRouter
, e parece que MemoryRouter
está saindo como undefined
.
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
at invariant (http://localhost:6006/static/preview.bundle.js:2056:15)
at createFiberFromElementType (http://localhost:6006/static/preview.bundle.js:27773:5)
at createFiberFromElement (http://localhost:6006/static/preview.bundle.js:27718:15)
at reconcileSingleElement (http://localhost:6006/static/preview.bundle.js:28966:19)
at reconcileChildFibers (http://localhost:6006/static/preview.bundle.js:29065:35)
at reconcileChildrenAtPriority (http://localhost:6006/static/preview.bundle.js:29715:30)
at reconcileChildren (http://localhost:6006/static/preview.bundle.js:29706:5)
at finishClassComponent (http://localhost:6006/static/preview.bundle.js:29842:5)
at updateClassComponent (http://localhost:6006/static/preview.bundle.js:29814:12)
at beginWork (http://localhost:6006/static/preview.bundle.js:30193:16)
Alguma idéia do que poderia estar acontecendo?
Olá @oyeanuj ,
Alguma notícia sobre isso? Estou tendo problemas muito semelhantes ao usar Route
.
@aperkaz Eu não consegui fazer isso funcionar ainda, então não incluindo esses componentes no Storybook :( Vou esperar por uma solução também ..
Você pode querer verificar qual versão do roteador react está usando.
A solução de @shilman acima funciona com o
Para react-router 3:
// ...
import { Router, Route } from 'react-router';
import createMemoryHistory from 'react-router/lib/createMemoryHistory';
storiesOf('Foo', module)
.addDecorator(story => (
<Router history={createMemoryHistory('/')}>
<Route path="/" component={() => story()} />
</Router>
))
.add('Default', () => <Foo />);
A resposta acertada funciona bem, mas eu consigo
Uncaught ReferenceError: ___loader is not defined
Qualquer ajuda com este erro
Para qualquer um que desembarque aqui no futuro depois de pesquisar no Google e arrancar cabelos, permita-me talvez poupar algum tempo.
O projeto no qual eu estava trabalhando tinha uma incompatibilidade de versão entre react-router
(que estava em "^ 4.1.1" em package.json) e react-router-dom
, (que estava em "próximo").
Isso causou um problema no meu caso devido ao React mudar a maneira this.context
funciona, e react-router-dom
seguindo o naipe. Isso acabou com meu <Link />
tentando puxar o contexto por um método que ainda não existia e lançando o excepcionalmente inútil "Você não deve usar um fora de um
Eu consertei trocando "react-router-dom": "next"
por "react-router-dom": "^4.1.1"
.
Para qualquer outra pessoa, o que realmente me ajudou foi este pacote: https://github.com/gvaldambrini/storybook-router/
Muito obrigado, as respostas ajudaram
Para qualquer um que use ganchos:
`` `
importar {createMemoryHistory} do 'histórico'
import {Router, Route} de 'react-router-dom'
const history = createMemoryHistory ({initialEntries: ['/']})
addDecorator (história =>
addDecorator (story => (
))
``
Comentários muito úteis
Você deve envolver sua história em
MemoryRouter
usando a funçãoaddDecorator
. Aqui está um trecho:Você pode ler um exemplo completo aqui: https://blog.hichroma.com/graphql-react-tutorial-part-5-6-ac36b6962a8a