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

CodePudding user response：

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>

CodePudding user response：

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>