任何鏈接反應應用程序的 gh-pages 上的 404 錯誤

Question

對於 package.json 文件中設置的“主頁”以外的任何鏈接，在 github 頁面上出現 404 錯誤。 主頁集是https://info340a-w20.github.io/project-travelanywhere/發布的應用程序上的每個其他鏈接，例如https://info340a-w20.github.io/home給出 404 錯誤。 該怎么辦？

截圖：主頁

404錯誤

App.js 代碼：

`

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

Answer 1

我知道的一件事是，您所有的應用程序 URL 都應該與https://info340a-w20.github.io/project-travelanywhere/ 相關。 因此，這個https://info340a-w20.github.io/home實際上應該指向https://info340a-w20.github.io/project-travelanywhere/home 。 如果你不介意，你可以分享你的package.json或者更好的是指向你的Github 存儲庫的鏈接。