We Keep Coding

TypeError: URL is not a constructor while using react-router-dom

I have been working on one of my personal projects which includes use of react-router-dom.I switched from react-router-dom v5 to v6 and errors started popping out .I have used react-router before but the error shown this time is kind of different and not able to debug the thing since a while. Why it is showing this kind of error?
I
here is my App.js
import React, { useState } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import StreetNode from "./components/StreetNode";
import Nodes from "./components/Nodes";
import { Scheduler } from "./components/Scheduler";
function App() {
return (
<Router>
<Navbar />
<Routes>
{/* <Route path="/" exact component={Nodes} /> */}
<Route path="/" element={<Nodes />} />
<Route path="/node/:id" element={<StreetNode />} />
<Route path="/scheduler" element={<Scheduler />} />
</Routes>
</Router>
);
}
export default App;
index.js
index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { NodeProvider } from "./NodeContext";
ReactDOM.render(
<NodeProvider>
<App />
</NodeProvider>,
document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
package.json
{
"name": "lightitup",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.4.2",
"#date-io/date-fns": "^2.11.0",
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#mui/icons-material": "^5.2.0",
"#mui/lab": "^5.0.0-alpha.61",
"#mui/material": "^5.0.2",
"#mui/styles": "^5.0.1",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.22.0",
"bootstrap": "^5.1.3",
"chart.js": "^3.6.2",
"chartjs-plugin-zoom": "^1.2.0",
"classnames": "^2.3.2",
"date-fns": "^2.27.0",
"react": "^17.0.2",
"react-chartjs-2": "^4.0.0",
"react-dom": "^17.0.2",
"react-google-charts": "^3.0.15",
"react-notifications-menu": "^1.0.6",
"react-router-dom": "^6.4.5",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"react-circular-slider-bar": "^1.3.1",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.17"
}
}

You must wrap Router with BrowserRouter. I'm not sure if this is because of the error but you must wrap BrowserRouter anyway.

how to generate static file from react js by using vite js

when I generate a static file of react js from vite js it shows just a blank page.
I don't know, Is this happening bcz of vite app, or is something wrong with the package.json configuration?
i also added homepage property in package.json file but same issue
Vite.config.js
import react from '#vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
base:"./"
})
App.js
import {BrowserRouter,Routes,Route} from 'react-router-dom'
import Navbar from './Layouts/Navbar'
import BecomeInfluncer from './Pages/BecomeInfluncer'
import Home from './Pages/Home'
import ErrorPage from './Pages/ErrorPage'
import PrivacyPolicy from './Pages/PrivacyPolicy'
import TermCondition from './Pages/TermCondition'
function App() {
return (
<>
<BrowserRouter>
<Routes>
<Route path='/' element={<Home/>} />
<Route path='/influencer' element={<BecomeInfluncer/>} />
<Route path='/term-condition' element={<TermCondition />} />
<Route path='/privacy-policy' element={<PrivacyPolicy/>} />
<Route path='*' element={<ErrorPage />} />
</Routes>
</BrowserRouter>
</>
)
}
Package.json
{
"name": "azgarty",
"homepage": "/",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.2.0",
"#fortawesome/free-solid-svg-icons": "^6.2.0",
"#fortawesome/react-fontawesome": "^0.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-responsive": "^9.0.0",
"react-router-dom": "^6.4.1",
"react-router-hash-link": "^2.4.3",
"swiper": "^8.4.2"
},
"devDependencies": {
"#types/react": "^18.0.17",
"#types/react-dom": "^18.0.6",
"#vitejs/plugin-react": "^2.1.0",
"autoprefixer": "^10.4.12",
"postcss": "^8.4.17",
"tailwindcss": "^3.1.8",
"vite": "^3.1.0"
}
}

SyntaxError: Unexpected token '<' when makin a sitemap using react-router-sitemap

i followed this blog because my goal is to generate a sitemap but i get an error when i run npm run sitemap:
SyntaxError: /Users/maurijnvd/discord_bots/geld-verdienen.nl/src/router.js: Unexpected token (5:2)
3 |
4 | export default (
> 5 | <Switch>
| ^
6 | <Route path='/' component={Home}/>
7 | <Route path='/10-manieren-om-geld-te-verdienen' component={Verdienen}/>
8 | <Route path='/hoe-bepaal-je-de-waarde-van-een-sneaker' component={WaardeBepalen}/>
this is my App.js file:
import './App.css';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import Home from './components/pages/Home'
import Verdienen from './components/pages/geld-verdienen'
import WaardeBepalen from './components/pages/sneaker-waarde'
import Navbar from './components/header';
import Footer from './components/footer'
import Page404 from './components/pages/404Page';
const App = () => {
return (
<>
<Router>
<Navbar/>
<Routes>
<Route exact path='/' element={<Home/>}/>
<Route exact path='/10-manieren-om-geld-te-verdienen' element={<Verdienen/>}/>
<Route exact path='/hoe-bepaal-je-de-waarde-van-een-sneaker' element={<WaardeBepalen/>}/>
<Route path='*' element={<Page404/>}/>
</Routes>
<Footer/>
</Router>
</>
);
}
export default App;
this is my router.js file
import React from 'react';
import { Switch, Route } from 'react-router';
import Home from './components/pages/Home'
import Verdienen from './components/pages/geld-verdienen'
import WaardeBepalen from './components/pages/sneaker-waarde'
import Page404 from './components/pages/404Page';
const Routes = () => {
return (
<Routes>
<Route exact path='/' element={<Home/>}/>
<Route exact path='/10-manieren-om-geld-te-verdienen' element={<Verdienen/>}/>
<Route exact path='/hoe-bepaal-je-de-waarde-van-een-sneaker' element={<WaardeBepalen/>}/>
<Route path='*' element={<Page404/>}/>
</Routes>
)
}
export default Routes
this is my sitemap-builder.js
require("#babel/register")({
presets: ["es2015", "react"]
});
const router = require('./router').default;
const Sitemap = require('react-router-sitemap').default;
(
new Sitemap(router)
.build("https://mi-awesome-website.com")
.save('./public/sitemap.xml')
);
and this is my package.json
{
"name": "geld-verdienen.nl",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/cli": "^7.19.3",
"#babel/polyfill": "^7.12.1",
"#babel/preset-env": "^7.19.3",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"sitemap": "babel-node src/sitemap-builder.js"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "^7.19.3",
"#babel/register": "^7.18.9",
"babel-jest": "^29.1.2",
"jest": "^27.5.1"
}
}
I already tried replace with but that didn't work.
how can i fix the error? Another way to make a sitemap would also be a good solution
Let me know if you need more information.
Edit: I changed the router.js file because it was outdated

React router dom is working for some component but not working for another component

My problem is that react-router-dom is working for Homepage and productList but not working for Signin component. I think there is no problem with snowpack. But I put snowpack config file, in case there is some problem. The weird thing is I added a Header for Homepage and product list but I didn't added the header for Signin component. but after changing the route, header is showing even I didn't add Header into the Signin Component. I am so confused that why this is happening.
App.jsx
import React from 'react';
import Homepage from './Containers/Homepage';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ProductList from './Containers/ProductList';
import Signin from './Containers/Signin';
function App() {
return (
<div className="App">
<Router>
<Switch>
<Route path="/" exact component={Homepage} />
<Route path="/:slug" component={ProductList} />
<Route exact path="/signin" component={Signin} />
</Switch>
</Router>
</div>
);
}
export default App;
Signin.jsx
import { Typography } from '#material-ui/core';
import React from 'react';
import Layout from '../Components/Layout';
const Signin = () => {
return (
<div
style={{
marginTop: '10rem',
paddingTop: '10rem',
background: 'black',
height: '100vh',
}}
>
Signin
</div>
);
};
export default Signin;
Header.jsx
this file is big. but I'm adding the route call.
const handleButtonClick = (pageURL) => {
history.push(pageURL);
};
<Button variant="contained" onClick={() => handleButtonClick('/signin')}>
Login
</Button>;
snowpack.config.js
/** #type {import("snowpack").SnowpackUserConfig } /
module.exports = {
mount: {
/ ... /
public: "/",
src: "/dist",
},
plugins: ["#snowpack/plugin-react-refresh"],
routes: [
{ match: "all", src: "/api/.", dest: (req, res) => proxy.web(req, res) },
{ match: "routes", src: ".", dest: "/index.html" },
],
optimize: {
/ Example: Bundle your final build: /
// "bundle": true,
},
packageOptions: {
polyfillNode: true,
},
devOptions: {
port: 3000,
},
buildOptions: {
/ ... */
},
};
package.json
{
"name": "ecommerce-website",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"#snowpack/plugin-webpack": "^2.3.1",
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"formik": "^2.2.6",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-query": "^3.13.12",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2",
"yup": "^0.32.9"
},
"scripts": {
"start": "snowpack dev",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": ["react-app", "react-app/jest"]
},
"browserslist": {
"production": [">0.2%", "not dead", "not op_mini all"],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#snowpack/plugin-react-refresh": "^2.5.0",
"snowpack": "^3.3.7"
}
}
Any help will be appreciated before I punch my Laptop Screen. Thanks.

The problem is with
<Route path="/:slug" component={ProductList} />
<Route exact path="/signin" component={Signin} />
/:slug as first route accepts everything and renders the productList on every request other than / Homepage because of the exact attribute.
You can interchange its position with the signIn component to get the correct Component Rendering. Like this
<Route exact path="/signin" component={Signin} />
<Route path="/:slug" component={ProductList} />

This route:
<Route path="/:slug" component={ProductList} />
Is a match for /signin, where signin is treated as the parameter :slug. In fact, this route will match pretty much any path except /, because you don't have an exact prop. The path /a/b/c/d is a match, where a is the parameter :slug.
I would restructure the switch to look like this:
<Switch>
<Route path="/" exact component={Homepage} />
<Route exact path="/signin" component={Signin} />
<Route path="/:slug" component={ProductList} />
</Switch>
It will now choose the first matching path, which is your static route. I would also potentially make the /:slug path exact as well if you are not expecting to match all paths here.

React Router With Handler showing blank page

I'm implementing react application. By the way, I'm encountering react router showing blank page without any error or exception. I have searched through stack overflow and knowing that browse history might be missing. I have no luck still even implemented browseHistory and the page is still showing blank.
Here is my code,
import React from 'react';
import ReactDOM from 'react-dom';
//import App from 'components/App.js';
//import Home from 'components/Home.js';
import injectTapEventPlugin from 'react-tap-event-plugin';
import { Router, Route, IndexRoute, browserHistory, hashHistory, RouteHandler } from 'react-router';
injectTapEventPlugin();
var Home = React.createClass({
render: function() {
return (<h1>Welcome to the Home Page</h1>);
}
});
let App = React.createClass({
render() {
<div className="nav">
<h1>It's work</h1>
<RouteHandler/>
</div>
}
});
let routes = (
<Route name="app" path="/" handler={App} >
<Route name="home" path="/home" handler={Home} />
</Route>
);
ReactDOM.render(<Router routes={routes} history={browserHistory} />, document.getElementById('app'));
Appreciate to somebody's contribution if you have idea about this.
Here is my package json.
{
"name": "finalize",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node server.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.24.0",
"babel-eslint": "^7.2.1",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-0": "^6.22.0",
"eslint": "^3.18.0",
"eslint-plugin-react": "^6.10.3",
"express": "^4.15.2",
"file-loader": "^0.10.1",
"react-hot-loader": "^1.3.1",
"webpack": "^2.3.2",
"webpack-dev-middleware": "^1.10.1",
"webpack-hot-middleware": "^2.17.1"
},
"dependencies": {
"material-ui": "^0.17.1",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router": "^3.0.2",
"react-tap-event-plugin": "^2.0.1"
}
}

Issue is you forgot to use return in App component, App is main component, so if you don't return anything it will always show blank page, use this:
let App = React.createClass({
render: function {
return (
<div className="nav">
<h1>It's work</h1>
<RouteHandler/>
</div>
)
}
});
Instead of handler use component, handler has been deprecated and doesn't supported in v3.x. check this: https://github.com/ReactTraining/react-router/issues/2887
Use it like this:
let App = React.createClass({
render: function() {
return (
<div className="nav">
<h1>It's work</h1>
{this.props.children}
</div>
);
}
});
let routes = (
<Route name="app" path="/" component={App} >
<Route name="home" path="/home" component={Home} />
</Route>
);
ReactDOM.render(<Router routes={routes} history={browserHistory} />, document.getElementById('app'));
Check the doc also they are using component: https://github.com/reactjs/react-router-tutorial/tree/master/lessons/02-rendering-a-route