Estoy tratando de construir mi primer sitio web de cartera y me quedé atascado en el enrutamiento usando react-router-dom 4.2.2 y styled-components 2.2.3.
mensaje de error: no debe usar Route o withRouter() fuera de un enrutador
También intento usar Link en lugar de NavLink pero también obtuve un error ( no debe usar Link fuera de un enrutador )
Alguien me ayuda por favor.
barra de navegación.js
import React, { Component } from 'react'; import { NavigationContainer, NavItem } from './navigationBar.style'; class NavigationBar extends Component { render() { return ( <NavigationContainer> <NavItem to="/">Home</NavItem> <NavItem to="/projects">Project</NavItem> </NavigationContainer> ); } } export default NavigationBar;barra de navegación.style.js
import styled from 'styled-components'; import { Flex, Div } from 'theme/grid'; import { NavLink } from 'react-router-dom'; export const NavigationContainer = styled(Flex)` position: fixed; right: 20px; top: 0.5em; font-size: 1em; `; export const NavItem = styled(NavLink)` position: relative; padding-left: 10px; cursor: pointer; `;Asegúrese de envolver el código principal de renderizado de reacción en el enrutador. Por ejemplo, con react-dom necesita envolver la aplicación en el navegador-router. Si se trata de un proyecto de Udacity, suele ser el archivo index.js.
import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter> , document.getElementById('root'));Bueno, estás usando un NavLink fuera del BrowserRouter / HashRouter (lo que sea que estés usando)
tu mismo lo dijiste
No debe usar Link fuera de un enrutador
Asegúrate de tener la estructura como esta
// App render or whatever render() { return ( <BrowserRouter> <NavigationBar /> {`whatever else you doin'`} </BrowserRouter> ); }Siempre debes renderizarlos dentro de un Router
Se responde un posible origen en español Stackoverflow, es un proyecto mecanografiado.
Publicación original: https://es.stackoverflow.com/a/372161/24877
De acuerdo con la documentación de React, esto generalmente sucede al duplicar React (más de una copia de React) https://reactjs.org/warnings/invalid-hook-call-warning.html
Aparentemente al usar el npm link la aplicación intenta usar reaccionar de los proyectos "react-app" y "react-app-components" y por lo tanto al publicarlo en el npm repository ya no sale el error.
Para solucionarlo, eliminé las dependencias react , react-router-dom del paquete.json y volví a ejecutar npm install para eliminar las carpetas de node_modules.
paquete.json
Antes:
{ //... "license": "ISC", "devDependencies": { "@babel/core": "^7.10.4", "@babel/preset-env": "^7.10.4", "@babel/preset-react": "^7.10.4", "@types/react": "^16.9.41", "@types/react-dom": "^16.9.8", "@types/react-router-dom": "^5.1.5", "babel-loader": "^8.1.0", "glob": "^7.1.6", "react": "^16.13.1", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "source-map-loader": "^1.0.1", "ts-loader": "^7.0.5", "typescript": "^3.9.6", "webpack": "^4.43.0", "webpack-cli": "^3.3.12" }, "peerDependencies": { "react": "^16.13.1", "react-router-dom": "^5.2.0" } }
{ //... "license": "ISC", "devDependencies": { "@babel/core": "^7.10.4", "@babel/preset-env": "^7.10.4", "@babel/preset-react": "^7.10.4", "@types/react": "^16.9.41", "@types/react-dom": "^16.9.8", "@types/react-router-dom": "^5.1.5", "babel-loader": "^8.1.0", "glob": "^7.1.6", "react": "^16.13.1", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "source-map-loader": "^1.0.1", "ts-loader": "^7.0.5", "typescript": "^3.9.6", "webpack": "^4.43.0", "webpack-cli": "^3.3.12" }, "peerDependencies": { "react": "^16.13.1", "react-router-dom": "^5.2.0" } }Después:
{ //... "license": "ISC", "devDependencies": { "@babel/core": "^7.10.4", "@babel/preset-env": "^7.10.4", "@babel/preset-react": "^7.10.4", "@types/react": "^16.9.41", "@types/react-dom": "^16.9.8", "@types/react-router-dom": "^5.1.5", "babel-loader": "^8.1.0", "glob": "^7.1.6", "source-map-loader": "^1.0.1", "ts-loader": "^7.0.5", "typescript": "^3.9.6", "webpack": "^4.43.0", "webpack-cli": "^3.3.12" }, "peerDependencies": { "react": "^16.13.1", "react-router-dom": "^5.2.0" } }
{ //... "license": "ISC", "devDependencies": { "@babel/core": "^7.10.4", "@babel/preset-env": "^7.10.4", "@babel/preset-react": "^7.10.4", "@types/react": "^16.9.41", "@types/react-dom": "^16.9.8", "@types/react-router-dom": "^5.1.5", "babel-loader": "^8.1.0", "glob": "^7.1.6", "source-map-loader": "^1.0.1", "ts-loader": "^7.0.5", "typescript": "^3.9.6", "webpack": "^4.43.0", "webpack-cli": "^3.3.12" }, "peerDependencies": { "react": "^16.13.1", "react-router-dom": "^5.2.0" } }Solo dejo los "@types" para trabajar con mecanografiado