React router dom renders a blank page - javascript

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>

Related

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

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 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.

Categories