We Keep Coding

Why routes not working for deployed react-website? [duplicate]

My previous website only shows the home page when the home tab is clicked, then if you click my navbar brand, it says 404. This website worked on a create-react-app with npm start, but it doesn't work here, nor on the build. I don't know what is wrong with the app, maybe the router setup is messed up, I don't know. I have linked the App and Index pages where I have the router setup. If you need any more information, just ask me for more information.
Thank You
Index
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom'
import App from './App';
import './styles/index.css';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
App
import { Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import About from "./routes/About";
import Contact from "./routes/Contact";
import Home from "./routes/Home";
import Project from "./routes/Project";
const App = () => {
return (
<>
<Navbar />
<Routes>
<Route path="/" element={<Home />}></Route>
<Route path="/about" element={<About />}></Route>
<Route path="/project" element={<Project />}></Route>
<Route path="/contact" element={<Contact />}></Route>
</Routes>
</>
);
};
export default App;

If deploying to GitHub, ensure there is a "homepage" entry in package.json for where you are hosting it in Github.
Example:
"homepage": "https://github.com/amodhakal/portfolio",
Switch to the HashRouter since GitHub pages doesn't support the tech used by the BrowserRouter.
index
import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter } from 'react-router-dom'
import App from './App';
import './styles/index.css';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<HashRouter>
<App />
</HashRouter>
</React.StrictMode>
);
For more details see the create-react-app docs for deploying to GitHub Pages and notes on client-side routing.

I faced this similar routing problem in ReactJs when I used gh-pages.
My Problem: Routes are working fine at my local system but when I deployed my web app to gh-pages I wasn't able to go to any page directly using the URL.
Example: ayushjaink8.github.io/cfhelper was working and I am able to go to other pages from within the web app too but when I directly type ayushjaink8.github.io/cfhelper/dashboard in the URL, it will show github 404 error page.
Solution: I resolved the above problem by using <HashRouter/> and adding the homepage tag in the package.json like homepage: "/<repository-name>/#".
gh-pages also follows this # rule in its URL routing. So it won't show any 404 error page if you write ayushjaink8.github.io/cfhelper/#/<any-route-of-your-app>.
Everything else remains the same in my codebase. I haven't used any useHistory() function or <BrowserRouter /> or any other thing as well. This simple hack works for all cases.
Instead of /<repo-name>, your homepage becomes /<repo-name>/#. That's all.
Here goes my sample code:
import { Routes, Route, HashRouter } from "react-router-dom";
<HashRouter>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/auth/login" element={<Login />} />
<Route path="/auth/signup" element={<Signup />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/contests/create" element={<CreateContest />} />
<Route exact path="/contests/join" element={<JoinContest />} />
<Route path="/contests/live" element={<LiveContest />} />
<Route path="/practice" element={ <Practice /> } />
<Route path="/analyze" element={ <Analyze /> } />
<Route path="/verify" element={<VerifyEmail />} />
<Route path="/profile/edit" element={<EditProfile />} />
</Routes>
<Footer />
</HashRouter>
Package.json Sample Code:
{
"name": "cfhelper",
"homepage": "/<your-github-repo-name>/#",
"version": "1.0.0",
"private": true,
}

// add basename to your browserRouter component
<BrowserRouter basename='/reponame'>
<App/>
<BrowserRouter/>

Figured it out. It's because of the url structure.
https://umair-mirza.github.io/safetyapp/
means you have to define a route for /safetyapp
like this:
<Route path='/safetyapp' element={<Home />} />

Only main page loads after React App Build, other pages returns your file couldn't be accessed error (ERR_FILE_NOT_FOUND)

I'm a beginner in React JS and is trying to do basic routing in the app.
The app serves fine on development using npm start server and serve -s build.
The build/index.html created in production using 'npm run build', served blank page initially.
On adding "homepage" : ".", it served the components in the main page (here index.js) alone.
The links in the navbar (home.js, about.js and contact.js) are not loading
error message - your file couldn't be accessed - ERR_FILE_NOT_FOUND
On clicking home link:
On clicking about link:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React Router Tutorial</title>
</head>
<body>
<div id="root" class="container"></div>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
ReactDOM.render(
<BrowserRouter>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</BrowserRouter>,
document.getElementById('root')
);
home.js
export default function Home() {
return (
<div>
<h1>Home Page</h1>
</div>
);
}
about.js
export default function About() {
return (
<div>
<h1>About Page</h1>
</div>
);
}
contact.js
export default function Contact() {
return (
<div>
<h1>Contact Page</h1>
</div>
);
}
build folder contains the files - index.html, asset-manifest.json and static/js directory with main.js, main.js.LICENCE.txt and main.js.map files as below:

Routes choose just one Route and render it. Routes render Main component first cuz its path is "/". In your code, when you click one of Links in nav. You can't go to the link cuz it's not rendered which means Browser can't access the component you want. If you wanna move page, you should useNavigate not Link. If my answer helped you, pls select my answer :D have a nice day.

react-cookie-consent does not work on html pages in public folder

I am using react-cookies-consent to display cookies and it is working without any problem on every component until I needed to add HTML pages to the public folder for SEO reasons now the cookies consent will not be displayed on these pages. Any suggestion on how should I approach this problem.
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from 'react-snapshot';
import {BrowserRouter as Router} from 'react-router-dom';
import Routes from "./routes";
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import CookieBanner from "./CookieBanner";
import * as serviceWorker from './serviceWorker';
import C5 from "./images/konfigurator/C5.webp";
import HelmetMetaData from "./HelmetMetaData";
render(
<React.StrictMode>
<Router>
<CookieBanner />
<Routes />
{/*<App />*/}
</Router>
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
class Routes extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<HelmetMetaData />
<Switch>
<Route exact path="/" render={() => {window.location.href="Home.html"}} />
<Route path="/Main" component={App}/>
<Route path="/About" render={() => {window.location.href="About.html"}}/>
<Route path="/impressum" render={() => {window.location.href="impressum.html"}}/>
<Route path="/blog" render={() => {window.location.href="blog.html"}}/>
<Route path="/Questions" render={() => {window.location.href="Questions.html"}} />
<Route path="/Answers" render={() => {window.location.href="Answers.html"}} />
<Route path="/info" render={() => {window.location.href="info.html"}} />
<Route component={Error}/>
</Switch>
</div>
);
}
};
export default Routes;
Update:
I just tried the possibility to render a component in HTML page I started with a simple example but it doesn't work
<script src="https://unpkg.com/react#16.13.1/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16.13.1/umd/react-dom.development.js" crossorigin></script>
<!--<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>-->
<script type="text/jsx">
var NewComponent = React.createClass({
render : function (){
return (
<h1>New year welcoming</h1>
)
}
})
ReactDOM.render(<NewComponent />, document.getElementById('banner'));
</script>
</body>
Yes i included <div id="banner"></div> just right after the <body>
No errors given it just doesn`t render

You're basically talking about having a mixed-domain. One SPA (your React app) and some non-spa HTML pages.
To make this work you'd have to run React in both scenarios, which is what you've tried in the last picture.
I would recommend foregoing the "HTML" pages route, it is difficult to maintain. Instead, you can use Gatsby to create those few static pages. You can even re-use components between your existing React code-base and the React-based Gatsby part.
Using static HTML pages doesn't improve SEO by default. If you're running into performance problems you should have a look at Server-side-rendering or static site generation (like Gatsby)

Load my styles files inside React helmet, before the component styles load

In my applications app.js, I load bootstrap CSS inside my react helmet for some reason, but loads after components customs styles loads. So some of my overrides styles not working. how can i load react-helmet CSS before the components?. Please help me on that
app.js
import React, { Component, Suspense, lazy } from "react";
import ...mycomponents
class App extends Component {
render() {
<div>
<Helmet>
<link
type="text/css"
rel="stylesheet"
href="vendors/bootstrap/css/bootstrap.css"/>
</Helmet>
<Switch>
<Route path="/home">
<Home {...this.props} />
</Route>
</Switch>
</div>
}
}
So need to load bootsrap.css before home component loads.

Reactjs: Component not rendering

This is embarrassing but I am losing time trying to figure out why a reactjs component isn't rendering.
Here is the code I have currently:
// index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ulonka Frontend</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
In routes.js
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
import App from './App'
render((
<Router history={browserHistory}>
<Route path="/" component={App}>
</Route>
</Router>
), document.getElementById('app'))
in App.js
import React from 'react'
export default React.createClass({
render() {
return <div> <h1> Hello </h1> </div>
}
})
Checked sources in dev tools and can see the string 'Hello' in bundle.js but for some reason it won't display in browser.
Can someone please explain to me what I am missing? Would greatly appreciate help. Thanks!

#Ursus, #polkovnikov.ph, #TheReason!
Forgot to indict that I figured out what my error was.
My error was setting the root component of the app (App.js) to the entry point of the App (index.js). Once that was mistake was corrected, App.js was rendered to the DOM.
Thanks for all your all; greatly appreciated.

You're using the wrong syntax in App.js: the class you want to export doesn't have a name.
So App.js should be either
import React from 'react'
const Hello = React.createClass({
render() {
return <div> <h1> Hello </h1> </div>
}
})
export default Hello;
or, ES6 version,
import React from 'react'
class Hello extends React.Component({
render() {
return <div> <h1> Hello </h1> </div>
}
})
export default Hello;
Check, for example: https://toddmotto.com/react-create-class-versus-component/
Your routes may be wrong. Your code works without react-router. Well, not quite: it works after applying the correct syntax. Check the fiddle.
Also, are routes.js and App.js in the same directory?

render method has been moved to react package.
Try this
import React, { render } from 'react'