React应用已成功部署，但导航到GitHub Pages中的错误页面

如何解决React应用已成功部署，但导航到GitHub Pages中的错误页面

大家好，我已经使用Git Hub页面成功部署了一个网站。该网站是托管项目的单个页面上的投资组合。该网站发布在https://ruben-olmos.github.io/portfolio/上。编写了代码，以便按标签对项目进行分类，并可以按类别对项目进行过滤。还编写了代码，以便如果缺少项目，则显示错误消息：“哦，您要查找的项目还不存在..！”。我上载了所有类别的项目，因此不应显示。初始导航时应显示的是包含所有项目的容器。但是，如果返回按钮显示“查看所有项目”，则会出现错误。如果单击返回按钮，它将最终显示正确的显示，但是它会从https://ruben-olmos.github.io/portfolio/导航到https://ruben-olmos.github.io，并且如果我刷新此页面，它显示404错误页面未找到。这是错误代码所在的页面

import React,{ Component } from 'react';
import { withRouter } from 'react-router'
import { connect } from 'react-redux';

import "./projectDetails.css";

import ReactGA from 'react-ga';

class ProjectDetails extends Component {

    componentDidMount() {
        document.addEventListener("keydown",this.handleKeyDown);
        
        const logPageView = () => {
            ReactGA.set({ page: window.location.pathname + window.location.search });
            ReactGA.pageview(window.location.pathname + window.location.search);
        }
        logPageView();
    }

    componentwillUnmount() {
        document.removeEventListener("keydown",this.handleKeyDown);
    }

    handleKeyDown = event => {
        if(event.keyCode === 27)
            this.close();
    }

    close = () => {
        this.props.history.push("");

        const logPageView = () => {
            ReactGA.set({ page: window.location.pathname + window.location.search });
            ReactGA.pageview(window.location.pathname + window.location.search);
        }
        logPageView();
    }

    render () {
        const projectId = this.props.location.pathname.substring(1);
        const project = this.props.projects.find( project => project.id === projectId);

        return (
            <div className="project-details-dialog-container margin home-section">
                <div className="project-details-navigate-back-button padding clickable text-unselectable" onClick={this.close}> 
                    <i className="fa fa-arrow-left project-details-icon" aria-hidden="true" /><span>show all projects</span>
                </div>
                { project ? <ProjectDetailsCard project={project} /> : <div className="project-not-found">Ouch,the project you are looking for doesn't exist .. yet!</div> }
            </div>
        );
    }
}

const ProjectDetailsCard = ({ project,onClick }) => {
    return (
        <div className="project-details-card" onClick={onClick} >
            <img className="project-details-image size" alt={project.name} src={project.img} />
            
            <div className="project-details-text padding">
                <div className="project-details-title">{project.name}</div>
                <div className="project-details-subtitle">{project.subtitle}</div>

                <div className="project-details-description"><MultilineText text={project.description} /></div>
                
                <div className="project-details-main-links">{project.links.map( link => ( 
                    <a className="project-details-link" key={link.url} href={link.url} target="_blank" rel="noopener noreferrer">
                        <i className={link.icon +" project-details-icon"} aria-hidden="true" />
                        <span>{link.name}</span>
                    </a> ))}
                </div>
                <div className="project-details-secondary-links">{project.secondaryLinks.map( link => ( 
                    <a className="project-details-link" key={link.url} href={link.url} target="_blank" rel="noopener noreferrer">
                        <i className={link.icon +" project-details-icon"} aria-hidden="true" />
                        <span>{link.name}</span>
                    </a> ))}
                </div>

            </div>

        </div>
    )
}

const MultilineText = ({text}) => {
    return (
        <div>
            { text.split("<br/>").map( (textLine,index) => <span key={index} >{textLine}<br/></span> ) }
        </div>
    );
}

const mapStatetoProps = store => ({
    projects: store.projects
})

export default withRouter(connect(mapStatetoProps)(ProjectDetails));

上面的代码位于一个名为ProjectDetials.js的文件下。

朋友发送给我的原始代码可在GitHub存储库https://github.com/PierfrancescoSoffritti/pierfrancescosoffritti.com中找到。 到目前为止，我所做的就是删除一些社交媒体元素并更改代码中的导航链接。 从逻辑上讲该错误应该不会发生，所以我认为这是一个事实，那就是它托管在页面上。

我已经检查了json文件，以确保导航发生在正确的页面上，但是问题似乎仍然存在。

为什么会出现此代码？