Github Pages Router shows no items 404 Error-CodePudding

When I try to access the About page from the menu, I get a 404 error from the server.

I tried changing the relative paths. and I switched to HashRouter in the index.jsx BrowserRouter. I also tried to include routes in app.js with HashRouter

github repo https://github.com/brunoBaumgartnerNiederbipp/oihawa

github pages https://brunobaumgartnerniederbipp.github.io/oihawa/

CodePudding user response：

Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.

brunobaumgartnerniederbipp.github.io/:1 GET https://brunobaumgartnerniederbipp.github.io/oihawa/index.css net::ERR_ABORTED 404

myiq.ch/public/favicon-32x32.ico:1 GET https://myiq.ch/public/favicon-32x32.ico net::ERR_CERT_COMMON_NAME_INVALID

CodePudding user response：

import React from "react";
import {
 HashRouter
  Routes,
  Route,

} from "react-router-dom";

import Home from "./components/home/Home";
import About from "./components/about/About";
import Contact from "./components/contact/Contact";
import Header from "./components/header/Header";
import Wordpress from "./components/wordpress/wordpress";
import "./App.css";
import Footer from "./components/footer/Footer";
import ReactApp from "./components/react/React";
import Static from "./components/static/Static";
import Social from "./components/social/Social";
import Impressum from "./components/impressum/Impressum";
import Datenschutz from "./components/datenschutz/Datenschutz";
import Allgemein from "./components/allgemein/Allgemein";
import Faq from "./components/faq/Faq";
import Referenzen from "./components/referenzen/Referenzen";
import Kosten from "./components/kosten/Kosten";
import Mini from "./components/mini/Mini";
import Pro from "./components/pro/Professional";
import Legendery from "./components/legend/Legend";
import Bellu from "./components/bellu/Bellu"
import Jewtschuk from "./components/jewtschuk/Jewtschuk";
import Ikal from "./components/ikal/Ikal";
import Luna from "./components/luna/Luna"
function App() {

    

    
    return (
      

       <>
    
        <Header />
            <HashRouter>
            <Routes> 
            <Route path="#/" exact element={<Home/>} />
            <Route path="#/About" exact element={<About/>} />
            <Route path="#/Contact" exact element={<Contact/>} />
            <Route path="#/Wordpress" exact element={<Wordpress/>} />
            <Route path="#/React" exact element={<ReactApp/>} />
            <Route path="#/Static" exact element={<Static/>} />
            <Route path="#/Social" exact element={<Social/>} />
            <Route path="#/Impressum" exact element={<Impressum/>} />
            <Route path="#/Datenschutz" exact element={<Datenschutz/>} />
            <Route path="#/Allgemein" exact element={<Allgemein/>} />
            <Route path="#/Faq" exact element={<Faq/>} />
            <Route path="#/Referenzen" exact element={<Referenzen />} />
            <Route path="#/Kosten" exact element={<Kosten />} />
            <Route path="#/Mini" exact element={<Mini />} />
            <Route path="#/Professional" exact element={<Pro />} />
            <Route path="#/Legend" exact element={<Legendery/>} />
            <Route path="#/Bellu"  exact element={<Bellu/>} />
            <Route path="#/Jewtschuk" exact element={<Jewtschuk/>} />
            <Route path="#/Ikal" exact element={<Ikal/>}/>
            <Route path="#/Luna" exact element={<Luna/>}/>
            <Route path="*" element={404} />
            </Routes>
            </HashRouter>
  
            <Social />
          <Footer />
            
              
            </>
  
 
    
    );
    }


export default App;

CodePudding user response：

import React from "react";
//import ReactDOM from "react-dom";
import {createRoot} from "react-dom/client";
import { HashRouter} from "react-router-dom";
import App from "./App";
import "./src/index.css";


//ReactDOM.render(<App />, document.getElementById("root"));

const container = document.getElementById("root");
const root = createRoot(container)
root.render(


   <HashRouter basename='/oihawa'>
<App />
     </HashRouter>

)

CodePudding user response：

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import 'bootstrap/dist/css/bootstrap.min.css';
import './navbar.css';

function BasicExample() {
  return (
    <Navbar bg="light" expand="lg">
      <Container>
   
        <Navbar.Brand href="/">MyIQ Webdesign</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="/">Home</Nav.Link>
            <Nav.Link href="./about">About</Nav.Link>
            <NavDropdown title="Services" id="basic-nav-dropdown">
              <NavDropdown.Item href="/wordpress">Wordpress</NavDropdown.Item>
              <NavDropdown.Item href="/react"> React.js</NavDropdown.Item>
              <NavDropdown.Item href="/static">Statische Websites</NavDropdown.Item>
              <NavDropdown.Item href="/kosten">Kosten</NavDropdown.Item>
              <NavDropdown.Item href="/referenzen">Referenzen</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="/contact">
                Kontakt
              </NavDropdown.Item>
            </NavDropdown>
          </Nav>
          <img href="./" className='logo' src="./public/logo2.png" alt="logo" />
        </Navbar.Collapse>
       
      </Container>
    </Navbar>
  );
}

export default BasicExample;