0
163
ViewsEl enrutador en react-router-dom arroja un error en la consola sin mensaje
Actualmente estoy creando una aplicación y me encuentro con este extraño error de react-router-dom del componente Route.
No estoy seguro de por qué recibo mensajes de error de producción cuando he habilitado "devtool: 'inline-source-map'" en el paquete web, pero esencialmente no estoy seguro de qué arroja el error. Esta es mi configuración frontal actual
import React from 'react'; import { render } from 'react-dom'; import { BrowserRouter as Router, Route } from 'react-router-dom'; import HomePage from './components/Homepage'; render( <Router> <div> Hello from react </div> <Route path="/" element={<HomePage />} /> </Router>, document.getElementById('app-portal') ); y comentando <Route path="/" element={<HomePage />} /> la aplicación funciona pero, por supuesto, necesito que Route funcione para esta aplicación...
Aquí están mis dependencias de package.json.
"dependencies": { "axios": "^0.26.1", "express": "^4.17.3", "html-webpack-plugin": "^5.5.0", "nodemon": "^2.0.15", "path": "^0.12.7", "react": "^18.0.0", "react-dom": "^18.0.0", "react-router": "^6.3.0", "react-router-dom": "^6.3.0" }, "devDependencies": { "@babel/cli": "^7.7.4", "@babel/core": "^7.12.10", "@babel/plugin-transform-runtime": "^7.8.3", "@babel/preset-env": "^7.16.11", "@babel/preset-react": "^7.16.7", "@babel/preset-stage-2": "^7.8.3", "@babel/register": "^7.7.4", "assert": "^2.0.0", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^8.2.3", "babel-loader": "^8.2.5", "babel-plugin-styled-components": "^1.12.0", "css-loader": "^6.7.1", "eslint": "^4.19.1", "eslint-plugin-react": "^7.8.2", "file-loader": "^6.2.0", "morgan": "^1.10.0", "style-loader": "^3.3.1", "webpack": "^5.72.0", "webpack-cli": "^4.9.2" },¿Alguien se ha encontrado con un problema similar? Si es así, ¿cómo se resolvió?
1 answers
Answer question0
Como se señaló en el comentario, la aplicación es una compilación de producción, por lo que se elimina la información de depuración. Sin embargo, en el registro de errores, esos son enlaces, por lo que puede hacer clic en ellos y ver alguna forma de su código y ver dónde está el problema, el código que arroja el error.
Sin embargo, según su código, asumiré que el error es que no está representando el componente Route en un componente de Routes . El componente Routes es lo que maneja la coincidencia de ruta de ruta y se requiere en react-router-dom@6 .
import React from 'react'; import { render } from 'react-dom'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import HomePage from './components/Homepage'; render( <Router> <div>Hello from react</div> <Routes> <Route path="/" element={<HomePage />} /> </Routes> </Router>, document.getElementById('app-portal') );