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