404 error on gh-pages for any link react app

Question

Getting a 404 error on github pages for any link other than the "homepage" that's been set in package.json file. The homepage set is https://info340a-w20.github.io/project-travelanywhere/ Every other link on the published app, for example, https://info340a-w20.github.io/home gives a 404 error. What to do?

Screenshots: homepage

404 error

App.js code:

`

import React, { Component } from 'react';
import GlobalStyle from './styles/Global';
import {
    Route,
    BrowserRouter,
    Switch
  } from "react-router-dom";

import '../src/css/App.css'
import './css/About.css'
import './css/AddBathroom.css'
import Navbar from "./components/navbar/Navbar";
import Home from "./components/Home";
import About from "./components/About";
import MapContainer from './components/MapContainer';
import MapContainerComp from './components/MapContainerComp'

import firebase from 'firebase';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

const uiConfig = {
    // Popup signin flow rather than redirect flow.
    signInFlow: 'popup',
    // Redirect to /signedIn after sign in is successful. Alternatively you can provide a callbacks.signInSuccess function.
    signInSuccessUrl: '',
    // We will display Google and Facebook as auth providers.
    signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID
    ]
};

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            navbarOpen: false,
            public: {},
            isSignedIn:false,
            uid: ''
        };
        this.favoritesRef = firebase.database().ref("mybathrooms");
        this.publicRef = firebase.database().ref("allBathrooms");
        this.publicRef.on('value', (snapshot) => {
            let data = snapshot.val();
            this.setState({public: data})
        })
    }



    componentDidMount() {
        this.unregisterAuthObserver = firebase.auth().onAuthStateChanged(
            (user) => this.setState({isSignedIn: !!user})
        );
    }

    componentWillUnmount() {
        this.unregisterAuthObserver();
    }


    handleNavbar = () => {
        this.setState({ navbarOpen: !this.state.navbarOpen });
    };

    render() {
            if (!this.state.isSignedIn) {
                return (
                    <div className="row">
                    <div className="column">
                    <div role="heading">
                        <h1>Bathroom Finder</h1>
                        <p>Please sign-in for more functionality:</p>
                        <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>
                        <Home />
                    </div>
                        <div className="column">
                        <MapContainer />
                        </div>
                    </div>
                    </div>

                );
            }
        return (
            <>
                <Navbar
                    navbarState={this.state.navbarOpen}
                    handleNavbar={this.handleNavbar}
                />
                <BrowserRouter>
                    <div role="separator">
                        <Switch>
                            <Route exact path={`/`} render={ (routerProps) => <Home routerProps={routerProps}/>} />
                            <Route path="/home" render= {props =>
                                <div className="home-container">
                                <div className="row">
                                    <div className="column">
                                    <Home />
                                    </div>
                                <div className="column">
                                    <MapContainer />
                                </div>
                                </div>
                                </div>
                            } />
                            <Route path="/bathroom" render= {props =>
                                <div>
                                    <MapContainerComp uid={this.state.uid}/>
                                </div>    
                            } />
                            <Route path="/about" render= {props =>
                                <div>
                                    <About />
                                </div>    
                            } />                        
                        </Switch>
                    </div>
                </BrowserRouter>

                <GlobalStyle />

                <div className="login" role="application">
                    <div className="row">
                    <h1>You are logged in to Bathroom Finder!</h1>
                    <p>Welcome {firebase.auth().currentUser.displayName}! You are now signed-in!</p>
                    </div>
                    <div className= "row">
                    <button className="signout" onClick={() => firebase.auth().signOut().then(function () {
                        console.log("signed out");
                    })}>Sign-out</button>
                    </div>
                </div>
            </>



        );
    }
}

export default App;`

Manan Joshi Manan Joshi · Accepted Answer · 2020-03-21T02:22:43

One thing that I know for a fact is all your app URL's should be relative to https://info340a-w20.github.io/project-travelanywhere/. Hence this https://info340a-w20.github.io/home should actually point to https://info340a-w20.github.io/project-travelanywhere/home. If you don't mind can you share your package.json or better yet point a link to your Github repo.

404 error on gh-pages for any link react app

1 Answers