Uso react-router-dom para el enrutamiento en mi aplicación React . Parte de mi aplicación extraída en otro paquete. La lista de dependencias se ve así:
./app/dashboard/paquete.json
{ "dependencies": { "@app/components": "^1.0.0", "react": "^16.8.5", "react-dom": "^16.8.5", "react-router-dom": "^5.0.0" } }./app/components/paquete.json
{ "peerDependencies": { "react-router-dom": "^5.0.0" } } Cuando uso componentes de @app/components que requieren componentes de react-router-dom obtengo estos errores:
Uncaught Error: Invariant failed: You should not use <Route> outside a <Router> The above error occurred in the <Context.Consumer> component: Uncaught (in promise) Error: Invariant failed: You should not use <Route> outside a <Router> ¿Por qué arroja este error? En App.js uso BrowserRouter
import React, { Suspense } from 'react'; import { Switch, Route } from 'react-router-dom'; import { Placeholder } from '@app/components'; const Auth = React.lazy(() => import(/* webpackPrefetch: true */ './pages/Auth')); const Index = React.lazy(() => import(/* webpackPrefetch: true */ './pages/Index')); const App = () => ( <Suspense fallback={<Placeholder />}> <Switch> <Route path="/auth" component={Auth} /> <Route path="/" component={Index} /> </Switch> </Suspense> ); export default App;cliente.jsx
import React from 'react'; import { render } from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import App from './App'; render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root'), );Resolví este problema cambiando:
import {Route, Switch} from "react-router";para
import {Route, Switch} from "react-router-dom";simplemente agregue -dom.
Tuve este problema mientras probaba y lo resolví envolviendo mi componente de prueba con enrutadores.
import React from 'react'; import ReactDom from 'react-dom'; import Header from '../components/Header/Header'; import { BrowserRouter } from 'react-router-dom'; it('renders Header without crashing', () => { const div = document.createElement('div'); ReactDom.render( <BrowserRouter> <Header /> </BrowserRouter>, div); ReactDom.unmountComponentAtNode(div); });Jest, Enzyme: Violación invariable: no debe usar o . Para probar un componente (con Jest) que contiene y withRouter necesita importar el enrutador en su prueba, no en su componente import { BrowserRouter as Invariant Violation: No debe usar o withRouter () fuera de un De acuerdo con los documentos del enrutador 4 de reacción, los componentes se consideran válidos, donde puedo crear componentes compuestos de s, luego importarlos a otro componente y colocarlos dentro de un archivo .
Problemas con 2 instancias de React