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

大家好，我已经使用Git Hub页面成功部署了一个网站。该网站是一个单一页面上的项目组合，承载项目。该网站发布于。编写代码的目的是按标签对项目进行分类，并按类别对这些项目进行筛选。代码也被编写成这样，如果一个项目丢失了，那么就会出现一个错误：“哎哟，你正在寻找的项目不存在……还没有！”。我上传了所有类别的项目，所以不应该显示。初始导航时应显示包含所有项目的容器。然而，它给出了一个返回按钮的错误，该按钮显示“查看所有项目”，如果我单击返回按钮，它最终显示正确的显示，除了它导航到，如果我刷新此页面，它显示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));

import React，{Component}来自'React'；
从“react router”导入{withRouter}
从'react redux'导入{connect}；
导入“/projectDetails.css”；
从“react ga”导入ReactGA；
类ProjectDetails扩展组件{
componentDidMount（）{
文件。添加的文件列表（“keydown”，此为。handleKeyDown）；
常量logPageView=（）=>{
ReactGA.set（{page:window.location.pathname+window.location.search}）；
页面视图（window.location.pathname+window.location.search）；
}
logPageView（）；
}
组件将卸载（）{
document.removeEventListener（“keydown”，this.handleKeyDown）；
}
handleKeyDown=事件=>{
如果（event.keyCode===27）
这个。关闭（）；
}
关闭=（）=>{
this.props.history.push（“”）；
常量logPageView=（）=>{
ReactGA.set（{page:window.location.pathname+window.location.search}）；
页面视图（window.location.pathname+window.location.search）；
}
logPageView（）；
}
渲染（）{
const projectId=this.props.location.pathname.substring（1）；
const project=this.props.projects.find（project=>project.id==projectId）；
返回(
显示所有项目
{项目？：哎哟，你要找的项目不存在..还没有！}
);
}
}
const ProjectDetailsCard=（{project，onClick}）=>{
返回(
{project.name}
{project.subtitle}
{project.links.map（link=>）
))}
{project.secondaryLinks.map（link=>）
))}
)
}
常量multilitext=（{text}）=>{
返回(
{text.split（“
”）.map（（textLine，index）=>{textLine}
）
);
}
常量mapStateToProps=存储=>({
项目：store.projects
})
使用路由器导出默认值（connect（mapstatetops）（ProjectDetails））；

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

朋友发给我的原始代码可以在GitHub存储库中找到。 到目前为止，我所做的只是删除一些社交媒体元素，并更改代码中的导航链接。 从逻辑上讲，这个错误不应该发生，所以我认为这意味着它在页面上托管这一事实存在问题

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

你知道为什么会出现这种代码吗