Py学习  »  Git

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

Mark Huynh • 4 年前 • 548 次点击  

我使用BrowserRouter创建了一个带有多个路由的ReactJS网页,并通过GitHub页面和它自己的域进行了部署。然而,当我在除主页‘/’页面以外的路线上刷新页面时,从Github收到一个错误404错误,该网站的工作完全符合预期。例如,我的域名是'kigaru sushi.com/'。当我尝试刷新或键入url“kigaru sushi.com/sushi”时,我将进入以下页面:

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

当我在本地进行模拟时,它似乎工作得很好。但是,当我运行脚本“npm run deploy”并在线查看并刷新页面时,似乎遇到了这个问题。

以下是my package.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"
  }
...

以及App.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>
    );

我试过删除process.env.PUBLIC_URL并添加一个basename,但都没有成功,我非常迷路。我也尽了最大努力使用HashRouter,但这似乎只是给了我一个空白页,当我部署它。任何帮助都将不胜感激!

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/55105
 
548 次点击  
文章 [ 1 ]  |  最新文章 4 年前
Clarity
Reply   •   1 楼
Clarity    4 年前

Github页面不能很好地处理客户端路由,尤其是浏览器路由器。

Create React App documentation 有一些解决办法。