0
216
VistasRouter in react-router-dom throws an error in the console with no message
I am currently building an app and am running into this weird react-router-dom error from the Route component.
I am not sure why i am getting production error messages when i have enabled "devtool: 'inline-source-map'," in webpack but essentially I am not sure what throws the error. This is my current front end set up
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')
);
and by commenting out <Route path="/" element={<HomePage />} /> the app works but of course I need Route to work for this app...
Here is my package.json dependencies.
"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"
},
Has anybody run into a similar issue? If so how was it resolved?
1 Respuestas
Responde la pregunta0
As noted in the comment, the app is a production build, so debugging information is removed. However, in the error log, those are links, so you can click on them and see some form of your code and see where the problem is, the code that throws the error.
However, based on your code, I'll assume the error is that you're not rendering the Route component to a Routes component. The Routes component is what handles the route route matching and is required in 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') );