1

I am creating a multipage website using React and hosting it on Github pages. The website loads perfectly fine on localhost, but runs into trouble on Github pages when trying to enter a subpage.

The main page displays on Github Pages, but when the subpage link is clicked, Github pages displays the error 404 page.

404
File not found

The site configured at this address does not contain the requested file.

Although this error is shown the URL displays the same way the local host displays it.

Main Page

LocalHost: http://localhost:3000/my-website/ ** Runs Fine **
Github: https://myname.github.io/my-website/ ** Runs Fine **

Sub Page

LocalHost: http://localhost:3000/my-website/project ** Runs Fine **
Github: https://myname.github.io/my-website/project ** Runs into Error **

Relevant Code:

Home.js snippet

<div>
  <a href='/my-website/project'>
    <img alt='Project 1' src={Sunset} />
  </a>
</div>

Main.js

import React from 'react';
import { Routes, Route } from 'react-router-dom';

import Home from './Pages/Home.js';
import Project from './Pages/Project.js';
import NoPage from './Pages/NoPage.js';

const Main = () => {
  return (
    <Routes>
      <Route path='/' element={<Home />}></Route>
      <Route path='/project' element={<Project />}></Route>
      <Route path="*" element={<NoPage />} />
    </Routes>
  );
}

export default Main;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router basename={`/${process.env.PUBLIC_URL}`}>
      <App /> {/* The various pages will be displayed by the `Main` component. */}
    </Router>
  </React.StrictMode>
);
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
ChristopherOjo
  • 237
  • 1
  • 12
  • Does this help answer your question? https://stackoverflow.com/a/71985764/8690857 I think you just need to switch from `BrowserRouter` to `HashRouter` for Github compatibility. – Drew Reese Aug 15 '22 at 16:58
  • Not quite. The homepage is correctly set as it does load and work as expected. The problem arises with the subpages. When I tried switching to HashRouter, all of my pages turned to blank pages. If I deleted the basename in `````` then the home page would load, but the local links were no longer recognized and the link to the subpage just reloaded the homepage again. – ChristopherOjo Aug 15 '22 at 17:05

2 Answers2

1

Issues

Assuming your package.json file specifies a correct homepage entry, i.e. "homepage": "https://myname.github.io/my-website", there are a couple issues.

  1. Github pages don't work well with the BrowserRouter. Use the HashRouter instead.
  2. Import and use the Link component to link to pages within the app. Using a raw anchor tag is likely sending a page request to the server for a sub-route that doesn't exist. (This is why the HashRouter is necessary, BTW)

Updates

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);

home.js

Replace the raw anchor tag and import and use the Link component that links to the "/project" route path.

import { Link } from 'react-router-dom';

...

<div>
  <Link to='/project'>
    <img alt='Project 1' src={Sunset} />
  </Link>
</div>
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
  • When I try this approach, having multiple pages works but the local references stop working. It is similar to this problem that I had: https://stackoverflow.com/questions/73356326/local-page-links-a-href-arent-working-with-hashrouter/73363735#73363735 – ChristopherOjo Aug 15 '22 at 22:57
  • In addition to the above issue, when the browser loads the new link, it loads starting in the middle of the page instead of at the top. – ChristopherOjo Aug 15 '22 at 22:58
  • @ChristopherOjo Oh, I was very close to commenting on your answer there. For that post the OP is having an issue using a hashlink to a section on the current page, not linking to any specific route. I *thought* I'd seen the code in your question somewhere before. – Drew Reese Aug 15 '22 at 23:18
  • @ChristopherOjo Can you clarify what local references you are referring to in your comment above? For the scrolling you likely need to implement a [scrollToTop](/a/71390300/8690857) or similar. – Drew Reese Aug 15 '22 at 23:20
  • Yeah, I thought your name looked familiar as well. I think the problem varies between each question because the approach is slightly different but the end goal remains the same. – ChristopherOjo Aug 15 '22 at 23:20
  • by local references, I am referring to linking to a different area of the same page. For example, linking to an element further down the page. – ChristopherOjo Aug 15 '22 at 23:21
  • 1
    @ChristopherOjo Oof, I just realized you *are* the OP for that other post. ‍♂️ – Drew Reese Aug 15 '22 at 23:21
  • 1
    @ChristopherOjo And yeah, these *are* two separate and independent issues. – Drew Reese Aug 15 '22 at 23:29
  • Haha yeah, its been quite troublesome. I believed I have solved them both by switching to HashRouter and using the react-router-hash-link. I have also fixed the scrolling problem thanks to the scrollToTop link you posted in your earlier comment. Thank you for your help! – ChristopherOjo Aug 15 '22 at 23:36
0

The solution was best described in this post in addition to doing what Drew Reese has commented.

Use anchors with react-router

In summary:

You need to install react-router-hash-link.

npm install --save react-router-hash-link

Add import { HashLink as Link } from 'react-router-hash-link'; to the page you use the links.

And use it as shown:

<Link className="nav-link" to="/#about-me">
  About Me
</Link>
ChristopherOjo
  • 237
  • 1
  • 12