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.

Error: Failed to initialize react-native-reanimated library

I was working on a project on react native trying to create drawer navigation
I installed a navigation drawer, gesture handler, and reanimated libraries
and when I run I got an error
1st error :
ERROR Error: Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/
Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details)
Make sure you reset build cache after updating the config, run: yarn start --reset-cache, js engine: hermes
so I did according to the suggestion in this error I added plugins:['react-native-reanimated/plugin' in the babel.config.js and started with npm start ----reset cache that gave me another error:
2nd error
error: index.js: Unknown option: .Plugins. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
here is my package.json
{
"name": "Train",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.11",
"#react-navigation/drawer": "^6.5.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/stack": "^6.3.1",
"react": "18.1.0",
"react-native": "0.70.1",
"react-native-gesture-handler": "^2.6.2",
"react-native-reanimated": "^2.10.0",
"react-native-safe-area-context": "^4.3.4",
"react-native-screens": "^3.17.0",
"react-navigation-stack": "^2.10.4"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.72.1",
"react-test-renderer": "18.1.0"
},
"jest": {
"preset": "react-native"
}
}
my index.js
import {AppRegistry} from 'react-native';
import App from './App';
import Login from './pages/Login';
import Home from './pages/Home';
import cart from './pages/Drawer/cart';
import items from './pages/Drawer/items';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
my babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
Plugins:['react-native-reanimated/plugin'],//I added this line because of the 1st error
};
my app.js
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator} from '#react-navigation/stack';
import {createDrawerNavigator} from '#react-navigation/drawer';
//for stack
import Login from './pages/Login';
import Home from './pages/Home';
//for drawer
import cart from './pages/Drawer/cart';
import items from './pages/Drawer/items';
import wallet from './pages/Drawer/wallet';
import orders from './pages/Drawer/orders';
const stack = createStackNavigator();
const Drawer = createDrawerNavigator();
function MystackNav(){
return(
<stack.Navigator>
<stack.Screen name='Login' component={Login} options={{headerShown:false}}/>
<stack.Screen name='Home' component={Home} options={{headerShown:false}}/>
<stack.Screen name='Drawer' component={MyDrawer}/>
</stack.Navigator>
)
}
function MyDrawer(){
return(
<Drawer.Navigator>
<Drawer.Screen name='cart' component={cart}/>
</Drawer.Navigator>
)
}
export default function App(){
return(
<NavigationContainer>
<MystackNav/>
</NavigationContainer>
)
}

Mine is working the only diff is:
babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin']
};
};
package.json
{
"name": "awesomeproject2",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"#react-navigation/bottom-tabs": "^6.4.0",
"#react-navigation/drawer": "^6.5.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/stack": "^6.3.2",
"babel-preset-expo": "^9.2.0",
"expo": "^46.0.16",
"expo-status-bar": "^1.4.0",
"react": "~18.1.0",
"react-native": "^0.70.3",
"react-native-gesture-handler": "^2.7.1",
"react-native-reanimated": "^2.11.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/plugin-proposal-export-namespace-from": "^7.18.9",
"babel-preset-expo": "^9.2.0"
},
"private": true
}

1.Update babel.config.js
module.exports = {
presets: [
...
],
plugins: [
...
'react-native-reanimated/plugin',
],
};
2.run expo start -c
references - https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

Routing not working with deployed create-react-app on github pages with react-router v6 [duplicate]

This question already has answers here:
React Router not working with Github Pages
(4 answers)
Closed 9 months ago.
Edit: I realized the problem was related to mistakes I was making with the deployment process.
I'm trying to get routing to work with a create-react-app I've deployed to github pages. None of the routes I have set up work, I just get the 404 screen for everything else except the homepage. I've tried following many other tutorials but none of them seem up to date. I'm using react-router v6 and I've tried using BrowserRouter and HashRouter but neither approach seems to be working.
My site: https://grantsuu.github.io/pages-routing/
My router in App.tsx file:
<HashRouter>
<nav>
<Link to="/">Home</Link>
<Link to="page">Page</Link>
<Link to="page/nested1">Nested 1</Link>
<Link to="page/nested2">Nested 2</Link>
</nav>
<Routes>
<Route path="/" element={<div>Home</div>} />
<Route path="page" element={<div>Page</div>} />
<Route path="page/nested1" element={<div>Nested 1</div>} />
<Route path="page/nested2" element={<div>Nested 2</div>} />
</Routes>
</HashRouter>
Package.json:
{
"name": "pages-routing",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.1",
"#types/node": "^16.11.36",
"#types/react": "^18.0.9",
"#types/react-dom": "^18.0.5",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build src",
"deploy": "gh-pages -d build"
},
"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": {
"gh-pages": "^4.0.0"
}
}

I would look into using BrowserRouter like this:
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Route, Routes, Outlet } from "react-router-dom";
const App = () => {
return (
<div>
<nav>
<Link to="/">Home</Link>
<Link to="page">Page</Link>
<Link to="page/nested1">Nested 1</Link>
<Link to="page/nested2">Nested 2</Link>
</nav>
<Outlet />
</div>
);
}
const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
<React.StrictMode>
<BrowserRouter>
<Routes>
<Route path="/" element={ <App /> }>
<Route path="page" element={<div>Page</div>} />
<Route path="page/nested1" element={<div>Nested 1</div>} />
<Route path="page/nested2" element={<div>Nested 2</div>} />
</Route>
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Whatever is passed in to the element prop of the child routes will be output to where the Outlet is in the App component.
https://reactrouter.com/docs/en/v6/components/outlet

React router dom renders a blank page

I am new to react-router-dom for the first time . I am using react-router-dom to switch between pages and it is rendering a blank page, only the navbar component is rendering. When I render the home and auth components individually outside the Routes, they render successfully.Please help me debugging this code.
Here is my App.js
import React from 'react';
import { Container } from '#material-ui/core';
import { BrowserRouter , Route , Routes } from 'react-router-dom'
import Home from './components/Home/Home';
import Navbar from './components/Navbar/Navbar';
import Auth from './components/Auth/Auth';
const App = () => (
<BrowserRouter>
<Container maxWidth="lg">
<Navbar />
{/* <Home/>
<Auth/> */}
<Routes>
<Route exact path="/" component={Home} />
<Route exact path="/auth" component={Auth} />
</Routes>
</Container>
</BrowserRouter>
);
export default App;
Here is my package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000/",
"dependencies": {
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"axios": "^0.19.2",
"moment": "^2.27.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-file-base64": "^1.0.3",
"react-google-login": "^5.2.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.2",
"react-scripts": "3.4.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint-config-airbnb": "^18.2.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.0"
}
}

it's element not component
<BrowserRouter>
<Container maxWidth="lg">
<Navbar />
{/* <Home/>
<Auth/> */}
<Routes>
<Route exact path="/" element={Home} />
<Route exact path="/auth" element={Auth} />
<Route path="*" element={<Navigate to="/" />} />
</Routes>
</Container>
</BrowserRouter>

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