CODEWITHSUNDEEP
reactjsdeploymentreact-routergithub-pages
Adam Tose
Adam Tose

Reputation: 5

Only home page works after deploy on GithubPages

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"
  },

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>
    );
};

Upvotes: 0

Views: 591

Answers (1)

Steve
Steve

Reputation: 122

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.

Upvotes: 1

Related Questions