I build and deployed my react app. React App just shows the starting page on Github pages. When I'm trying to switch page 404 error apear. App With Localhost works perfectly. I don't know what do to. Nothing help so far. My code below:

package.json

{
  "name": "HotelLiveDemo",
  "homepage": "https://JakubSoldek.github.io/HotelLiveDemo/",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "cra-template": "1.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-router-dom": "^6.0.2",
    "react-script-tag": "^1.1.2",
    "react-scripts": "4.0.3",
    "styled-components": "^5.3.3"
  },
  "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"
  },

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

router

const Router = () => {
    return (
        <BrowserRouter basename={process.env.PUBLIC_URL}>
            <Routes>
                <Route path='/' element={<AboutUs />} />
                <Route path='/hotel' element={<Hotel />} />
                <Route path='/ContactUs' element={<ContactUs />} />
                <Route path='/RoomsPage' element={<RoomsPage />} />

            </Routes>
        </BrowserRouter>
    );
};

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You should use a HashRouter instead of a BrowserRouter here when deploying to Github pages. Github pages does not support browser history, so Github pages gets confused of where to navigate from.

See the end of this article and also the "Add routing to our application" section here.