We Keep Coding

application cannot be run on localhost or with github page

Can I ask for help? Initially, the application that I built using React JS could run on localhost. However, when I try to deploy using GitHub pages, the application cannot be run even though the React code has been deployed to GitHub.
This is the json package that I set to deploy with GitHub pages
{
"name": "movie-app",
"version": "0.1.0",
"homepage": "http://xcage88.github.io/movie-app",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.2.1",
"#fortawesome/free-solid-svg-icons": "^6.2.1",
"#fortawesome/react-fontawesome": "^0.2.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.3",
"gh-pages": "^5.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.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",
"predeploy": "npm run build",
"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": {
"react-router-dom": "^6.8.0"
}
}
this is code index and app.js
App.js :
import { Route, Routes } from 'react-router-dom';
import SignUp from './component/SignUp';
import ForgotForm from './component/ForgotForm';
import LoginForm from './component/LoginForm';
import MainPage from './component/MainPage';
function App() {
return (
<div>
<div>
<Routes>
<Route path='/' exact element={<LoginForm/>}/>
<Route path='/forgot' element={<ForgotForm/>}/>
<Route path='/sign-up' element={<SignUp/>}/>
<Route path='/main/*' element={<MainPage/>}/>
</Routes>
</div>
</div>
);
}
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './style/style.css'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.bundle'
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
when I try to run it, the result is like this:
run in GitHub pages
run in localhost
if you want to try it, click or copy/paste the link below
react app

I can't exactly tell you why you are getting the error from the first screenshot. It seems like it is some Google-Thingy.
I found this related question and it seems like you have to set a flag to ignore or disable this "feature". As I looked further into the topic, in your case it's more about enabling the feature instead of disabling.
Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'
Maybe you find more when you search for "floc google".
For your localhost problem, it seems like the path is just / instead of /movie-app.

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

Unable to use imported SASS styles in my React js project

I have followed the same process I use in most of my projects for importing SASS styles. I created my react app app. Installed SASS with the following command npm install node-sass I import my SASS file into my app components as shown below:
import React from "react";
import { ProvideAuth, useAuth } from "./use-auth.js";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import './test.scss';
function App() {
const auth = useAuth();
return (
<ProvideAuth>
<Router>
<nav>
<div>
<Link to='/'>Home</Link>
<Link to='/about'>About</Link>
</div>
<div>
<button onClick={() => auth.signin()}>Sign In</button>
<button onClick={() => auth.signout()}>Sign Out</button>
</div>
</nav>
<Switch>
<Route exact path="/">
home
</Route>
<Route path="/about">
about
</Route>
</Switch>
</Router>
</ProvideAuth>
);
}
export default App;
This SASS file 'test.scss' is kept within the same folder as App.js
I have kept the contents of this SASS file very basic for the sake of testing:
nav{
display: flex;
background: blue;
}
The project compiles without any errors yet none of my styles are applied. Below is the package.json for my project:
{
"name": "wally",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"firebase": "^8.7.1",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^1.1.5",
"web-vitals": "^1.1.2"
},
"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"
]
}
}

Okay I have no real answer to my own question but effectively I rebuilt the project and things seemed to work fine. Effectively turning it off and on again.
I viewed some other similar questions and some people had issues integrating sass with react-router. Not too sure if that's related to my particular issue, nonetheless reinstalling everything from new seemed to solve things.

Can not pass state with react router dom v6 beta, state is null [duplicate]

This question already has answers here:
How to pass data from a page to another page using react router
(5 answers)
Closed 10 months ago.
App.js file
export default function App() {
return (
<div className="h-100">
<Routes>
<Link to={
{
pathname: "/posts",
state: {test: 'test'}
}
}>Posts</Link>
<Route path="/" element={<Home/>}/>
<Route path="/login" element={<Login/>}/>
<Route path="/posts" element={<Posts/>}/>
</Routes>
</div>
)
}
expected to pass state,some piece of data from one page to another
when using useLocation to get state from another page state is null
index.js file
import {BrowserRouter as Router} from "react-router-dom";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<Router>
<App/>
</Router>
</React.StrictMode>
,
document.getElementById('root')
);
Posts.js file
const location=useLocation()
console.log(location);
Output
Object { pathname: "/posts", search: "", hash: "", state: null, key: "hpuuzep5" }
package.json
{
"name": "chance",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.6.3",
"axios": "^0.21.1",
"bootstrap": "^5.0.0-beta3",
"history": "^5.0.0",
"ramda": "^0.27.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.2",
"styled-components": "^5.2.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"
]
}
}
I can not either import switch from react-router-dom, it says switch is not exported from react router dom, I think have correctly set up my routes where is the error i can not pass state from one route to another

I was able to get state by doing this:
<Link
to={"/posts"}
state={{test: 'test'}}>
Posts
</Link>
I opened the type declaration and finally realized state was a prop, and not part of the to object https://github.com/ReactTraining/react-router/blob/dev/docs/api-reference.md#link

I would like to add that in Version 5 you could get the state passed to the component by the props.
Now it only works using useLocation.
Component where the <Link /> is
<Link to={'/page1'} state={{ state: 'mystate' }} >Page 1</Link>
Component where you want to get the state
import { useLocation } from 'react-router-dom';
const { state } = useLocation()
I found this article about that.
https://ui.dev/react-router-pass-props-to-link/
I spend to many time around this and somehow i couldn't find any information about this on the documentation.
Hope to help someone out there

You can also navigate to a certain path by using the useNavigate() hook like so:
const navigate = useNavigate();
navigate('/posts', {state: { test: 'test'}})
The full explanation is documented very well here:
https://reactrouter.com/docs/en/v6/upgrading/v5#use-usenavigate-instead-of-usehistory

My React App never loads in localhost:3000 its just always spinning (Think React-Router-Dom is the issue)

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}/>