Question 51086 in Javascript Question posted in
A very good W3school tutorial can be found here.

React router dom wont work when I deploy with gh-pages – Javascript

in App.js:

return (
    <BrowserRouter basename="/">
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route exact path="/home" element={<Home />} />
        <Route exact path="/header" element={<div><Header links={"/"}/><Me /><Footer /></div>} />
        <Route exact path="/me" element={<div><Header links={"/"}/><Me /><Footer /></div>} />
        <Route exact path="/About" element={<div><Header  links={"/"}/> <About /> <Footer /></div>} />
        <Route exact path="/projects" element={<div><Header  links={"/"}/> <Projects /> <Footer /></div>} />
        <Route exact path="/skills" element={<div><Header  links={"/"}/> <Skills /> <Footer /></div>} />
        <Route exact path="/contact" element={<div><Header  links={"/"}/> <Contact /> <Footer /></div>} />
        <Route path="*" element={<ErrorPage />} />
      </Routes>
    </BrowserRouter>
  );
}

This is working correctly at localhost, and first deploy was working.
I haven’t change app.js and I fix some bugs When I deployed, then it haven’t work again.
Now I am deploying to github with npm run deploy, only home page is working.

in package.json:

{
  "homepage": "http://ayazvefa.dev/",
  "name": "vefa-ayaz",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "aos": "^3.0.0-beta.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.9.0",
    "react-script-tag": "^1.1.2",
    "react-scripts": "5.0.1",
    "typed.js": "^2.0.132",
    "web-vitals": "^2.1.4"
  },
  "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"
  },

github pages screenshoot

and here to source code
and here to website link

I don’t know where is the problem, I use hashrouter(it was working(/#/)), I added basename(website link, "/") and it wasn’t working again Where is the problem? why browserrouter wont work?

Tags:

2

Answers


  1. 0

    GitHub Pages is built for static sites. Every HTML, CSS, JS, image, etc. file is supposed to be an actual file. The problem is that React apps like yours are single-page applications, in the sense that there is only one HTML file and all routing is done with JavaScript. The development server (and some deployment servers, if you go with a paid service or a different free service) maps every unknown page back to the index.html file (with create-react-app, that’s in the ./public directory). GitHub pages doesn’t do that, if you request yourwebsite.github.io/apple/banana, it will look for an index.html file in a directory called ./apple/banana, which doesn’t exist. In the dev server, it will return the main index.html file from the public directory and then your React app handles displaying that page.

    The HashRouter gets around that by using the hash of the URL. You’ve probably already seen this with URLs such as https://en.wikipedia.org/wiki/React_(software)#Notable_features. Everything after the hash (#) is not sent in the request to the server, but rather handled by the browser. The default behavior is to scroll down to an element with that id (in this case, scroll down to the "Notable features" section which has the id of Notable_features. This means that if you sent a request to your GH Pages site like yourwebsite.github.io/#/apple/banana, the actual request for HTML is yourwebsite.github.io/, which will properly get your React app. Then, react-router-dom will use the information in the hash of the URL to display a "page" even though it’s not a page in the traditional sense.

    If you want to use React router on GitHub pages, then you either need to use a HashRouter or a MemoryRouter, but notice that the memory router will not have shareable links as it stores what page you’re on in memory (using a JavaScript object). For more details you can look at React Router’s page on Picking a Router.

    From their site,

    This router is useful if you are unable to configure your web server to direct all traffic to your React Router application. Instead of using normal URLs, it will use the hash (#) portion of the URL to manage the "application URL".

    Using hash URLs is not recommended.

    Other than that, it is functionally the same as createBrowserRouter.

    Login or Signup to reply.
  2. 0

    GitHub doesn’t support browser history. Therefore you should use hash router instead.

    import { HashRouter } from "react-router-dom";
...

<HashRouter>
    <App />
</HashRouter>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search