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
Related
I have a react component in this path: host/qr-ui/v1/report-detail/:year/:quarter
which is not my home page. when I reload it I get this error:
GET ../qr-ui/v1/report-detail/:year/static/js/2.e2743d9e.chunk.js net::ERR_ABORTED 404
well my static file is not here. but why it cannot find the location to static file.
I'm using react-scripts. and this is my package.json
{
"name": "qr-ui-v1",
"version": "0.1.0",
"private": true,
"homepage": ".",
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router": "5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3"
},
"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"
]
}
}
and this is my app.js
import React from 'react';
import './App.css';
import './css/Button.css';
import './css/Jumbo.css';
import './css/Form.css';
import ReportManagerComponent from './components/ReportManagerComponent.js'
import ReportDetailComponent from './components/ReportDetailComponent.js'
import Nav from './components/Nav.js'
import {
BrowserRouter as Router,
Switch,
Route,
} from 'react-router-dom';
function App() {
return (
<React.Fragment>
<Router basename='/qr-ui/v1'>
<Nav/>
<Switch>
<Route exact path='/' component={ReportManagerComponent} />} />
<Route exact path='/report-detail/:year/:quarter' component={ReportDetailComponent} />}/>
</Switch>
</Router>
</React.Fragment>
);
}
export default App;
In first component I redirect to the second one but cannot load the second one directly.
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
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>
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.
I have been developing a website in React using React-Bootstrap, and it has worked fine up until I installed and configured React-Router-Dom and started implementing routes, links, etc...(I have also installed react-router-bootstrap to work with it)
I am almost certain it is react-router-dom that is the issue as at the beginning, I was having similar issues. When I made a new fresh project, I decided not to install react-router-dom until towards the end of the development.
When I run NPM Start, it appears on my browser with the React favicon and name of the app, but the loading spinner is just constantly loading.
In the Command-Line, the development server compiles successfully, and there are no errors - so I'm finding it hard to work out where the issue is.
All relevant code is below.
App.js
import './App.css';
import Navigation from "./Components/Nav";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Col, Container, Row } from 'react-bootstrap';
import Karousel from './Components/Carousel';
import YtCard from './Components/Cards/YoutubeCard';
import BandcampCard from './Components/Cards/BandcampCard';
import SpotifyCard from './Components/Cards/SpotifyCard';
import Footer from './Components/Footer';
import { FormspreeProvider } from '#formspree/react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import { HashRouter } from 'react-router-dom'
import Contact from './Pages/Contact';
function App({Component, pageProps }) {
return (
<FormspreeProvider project="{music-boostrap}">
<Router>
<div className="app">
<div className="navigation">
<Navigation/>
</div>
<Switch>
<Route exact path="/" component={App}/>
<Route path="/contact" component={Contact}/>
</Switch>
<div className="carousel">
<Container className="carousel-container" fluid>
<Karousel/>
</Container>
</div>
<div className="description">
<Container fluid>
<Row>
<Col className="desc-col">
<YtCard/>
</Col >
<Col className="desc-col">
<BandcampCard/>
</Col>
<Col className="desc-col">
<SpotifyCard/>
</Col>
</Row>
</Container>
</div>
<Footer/>
</div>
</Router>
</FormspreeProvider>
);
}
export default App;
package.json
{
"name": "music-bootstrap",
"version": "0.1.0",
"private": true,
"dependencies": {
"#formspree/react": "^2.2.3",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.7.3",
"bootstrap": "^4.6.0",
"react": "^17.0.1",
"react-bootstrap": "^1.5.0",
"react-dom": "^17.0.1",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.0"
},
"scripts": {
"start": "react-scripts start",
"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"
]
}
}
If any files are missing with code you might think is relevant to solving these issues, please let me know!
You're attempting to render App inside App, which results in an endless recursion, you need to use a different component here
<Route exact path="/" component={App}/>