default landing page is not showing in react.js

Question

path="/" works perfectly in local but when i have hosted it with the github pages.While visitig the site through the link it only shows the navigation and footer.

This is the code of my App.jsx

import React from 'react'
import Nav from './components/Nav'
import Footer from './components/Footer'
import Hero from './pages/Hero'
import Aboutme from './pages/Aboutme'
import Project from './pages/Project'
import Service from './pages/Service'
import Contact from './pages/Contact'
import './App.sass'
import './style/Responsive.sass'
import {BrowserRouter as Router , Routes, Route}from 'react-router-dom'
const App = () => {
  return (
    <Router>
      <Nav></Nav>
      <Routes>
        <Route path='/' element={ <Hero></Hero> }></Route>
        <Route path='/aboutme' element={<Aboutme></Aboutme>}></Route>
        <Route path='/project' element={<Project />}></Route>
        <Route path='/service' element={<Service />}></Route>
        <Route path='/contact' element={<Contact />}></Route>
      </Routes>
      <Footer></Footer>
    </Router>
  )
}

export default App

this is package.json file

{
  "homepage": "https://Ashimgautam356.github.io/ReactPortfolio",
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.7.1",
    "react-router-dom": "^6.6.1",
    "react-scripts": "5.0.1",
    "sass": "^1.57.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "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"
    ]
  },
  "devDependencies": {
    "gh-pages": "^4.0.0"
  }
}

I am expecting to get render all the components like navigation, Hero component(body), footer of the site.

Hi! did you tried unsing HashRouter as I mentioned in my answer ? — Ahmed Sbai, Mar 06 '23 at 08:13

score 0 · Answer 1 · answered Mar 04 '23 at 18:03

Why does this happen? Because GitHub Pages does not support browser history like your browser does. In our case, the route https://tomerpacific.github.io/starter-project/about doesn't help GitHub Pages understand where to point the user (since it is a frontend route).

source link

So you have to use HashRouter instead of BrowserRouter if you want to deploy your app to GitHub

default landing page is not showing in react.js

1 Answers1