在带有路由的 github 页面上部署 Reactjs 网站会导致刷新时出现 404 错误

Question

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

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

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

这是我的包.json的开头：

{
"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"
}
...

和我在应用程序中的路线.js：

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

我尝试删除proccess.env.PUBLIC_URL并添加基本名称，但都没有奏效，我很迷茫。我也尽力使用HashRouter，但这似乎只在我部署它时给了我一个空白页。任何帮助将不胜感激！

Answer 1

Github页面不能很好地与客户端路由配合使用，尤其是浏览器路由器。

创建 React 应用程序文档对此有一些解决方案。

Answer 2

我意外找到的另一个解决方案(不是哈希路由器(

例如，url：路由路径中的username.github.io/gh-pages-url/放置/gh-pages-url而不是根/，例如：

ReactDOM.render(
<Router>
<Switch>
<Route path="/gh-pages-url" component={App} exact />
<Route path='/gh-pages-url/contacts' component={Contacts} />
</Switch>
</Router>,
document.getElementById('root')
);

Answer 3

GitHub 页面不支持客户端路由，但您可以使用 HashRouter 而不是 BrowserRouter

import { HashRouter as Router} from "react-router-dom";