使用路由在 github 页面上部署 Reactjs 网站导致刷新时出现 404 错误

本文介绍了使用路由在 github 页面上部署 Reactjs 网站导致刷新时出现 404 错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用 BrowserRouter 创建了一个具有多个路由的 ReactJS 网页，并通过 GitHub 页面部署了它自己的域.该网站按预期完美运行，但是，当我在主页/"页面以外的路线上刷新页面时，我收到来自 Github 的错误 404 错误.例如，我的域名是kigaru-sushi.com/".当我尝试刷新或输入网址kigaru-sushi.com/sushi"时，我会进入此页面:

https://i.stack.imgur.com/VxgIU.png

当我在本地模拟时，它似乎工作正常.但是，当我运行脚本npm run deploy"并在线查看并刷新页面时，我似乎遇到了这个问题.

这是我的 package.json 的开头:

{"name": "kigaru-app",版本":0.1.0"，私人":真的，"主页": "https://kigaru-sushi.com/",依赖关系":{"@material-ui/core": "^4.3.0","@material-ui/styles": "^4.3.0","gh-pages": "^2.0.1",反应":^ 16.8.6"，"react-dom": "^16.8.6",反应姿势":^4.0.8"，"react-redux": "^7.1.0","react-router-dom": "^5.0.1","反应脚本": "^2.1.8","redux": "^4.0.4"}...

以及我在 App.js 中的路由:

render() {返回 (<浏览器路由器><div>{this.state.isDesktop ?<导航栏/>:<Mobilenav openDrawer={this.state.openDrawer} closeDrawer={() =>this.setState({openDrawer: false})}/>}<路由精确路径={process.env.PUBLIC_URL + '/'} render={() =>(<家handleListClick={() =>this.setState({openDrawer: true})}/>)}/><路线路径=/寿司"组件={() =>(<寿司握寿司={寿司.握寿司}gunkan={寿司.gunkan}makirolls={寿司.makirolls}桌面={this.state.isDesktop}/>)}/><路线路径=/开胃菜"渲染={() =><开胃菜开胃菜={开胃菜}/>}/><路线路径=/主菜"渲染={() =>(<维护japaneseCurry={maindish.japaneseCurry}面条={maindish.noodles}唐布里={maindish.donburi}/>)}/><路线路径=/饮料"渲染={() =>(<饮料啤酒={饮料.啤酒}chuHi={饮料.chuHi}softDrinks={drinks.softDrinks}甜点={饮料.甜点}/>)}/><路线路径=/联系"渲染={() =>(<联系方式/>)}/><流行姿势={this.state.showDialog ?静态":成长"}><FabonClick={this.handleClickButton}风格={{位置:固定"，底部:0"，右:0"，zIndex: 2,marginRight: "5px",边距底部:10px"}}大小={this.state.isDesktop ?大小"}><图标风格={this.state.isDesktop?{字体大小:40px"}:{字体大小:30px"}}颜色={错误"}>收藏夹边界</图标></Fab></流行音乐><Shopping open={this.state.showDialog} close={this.handleClose}/><页脚/>

{ "name": "kigaru-app", "version": "0.1.0", "private": true, "homepage": "https://kigaru-sushi.com/", "dependencies": { "@material-ui/core": "^4.3.0", "@material-ui/styles": "^4.3.0", "gh-pages": "^2.0.1", "react": "^16.8.6", "react-dom": "^16.8.6", "react-pose": "^4.0.8", "react-redux": "^7.1.0", "react-router-dom": "^5.0.1", "react-scripts": "^2.1.8", "redux": "^4.0.4" } ...

render() { return ( <BrowserRouter> <div> {this.state.isDesktop ? <Navbar /> : <Mobilenav openDrawer={this.state.openDrawer} closeDrawer={() => this.setState({openDrawer: false})}/>} <Route exact path={process.env.PUBLIC_URL + '/'} render={ () => (<Home handleListClick={() => this.setState({openDrawer: true})} />)} /> <Route path="/sushi" component={() => ( <Sushi nigiri={sushi.nigiri} gunkan={sushi.gunkan} makirolls={sushi.makirolls} desktop={this.state.isDesktop} /> )} /> <Route path="/appetizers" render={() => <Appetizers appetizers={appetizers} />} /> <Route path="/maindish" render={() => ( <Maindish japaneseCurry={maindish.japaneseCurry} noodles={maindish.noodles} donburi={maindish.donburi} /> )} /> <Route path="/drinks" render={() => ( <Drinks beer={drinks.beer} chuHi={drinks.chuHi} softDrinks={drinks.softDrinks} dessert={drinks.dessert} /> )} /> <Route path="/contact" render={() => ( <Contact /> )} /> <Pop pose={this.state.showDialog ? "static" : "grow"}> <Fab onClick={this.handleClickButton} style={{ position: "fixed", bottom: "0", right: "0", zIndex: 2, marginRight: "5px", marginBottom: "10px" }} size={this.state.isDesktop ? "large" : "small"} > <Icon style={ this.state.isDesktop ? { fontSize: "40px" } : { fontSize: "30px" } } color={"error"} > favorite_border </Icon> </Fab> </Pop> <Shopping open={this.state.showDialog} close={this.handleClose} /> <Footer /> </div> </BrowserRouter> );