Reactjs 我在重新加载React路由器应用程序时出现404错误

当我在本地服务器上重新加载应用程序时，一切正常。但是，当我在gh页面上托管时重新加载页面时，会出现404错误。它不会在主页上这样做，但会在其他两个页面上这样做。它是否与远程托管有关？我对路由器有点不在行。任何帮助都将不胜感激。以下是相关代码和我的应用程序链接：

从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
类应用程序扩展组件{
render（）{
返回(
}
}
);
}
}
常量导航=（）=>{
返回(
家
游戏
关于
);
}
类游戏扩展组件{
addDefaultSrc=（ev）=>{
ev.target.src=错误图标；
}
render（）{
const{icon，gameTitle，game}=this.props；
返回(
{gameTitle}
);
}
}
ReactDOM.render（，document.getElementById（'root'））；

这是因为当您重新加载页面时，它会尝试访问

/games

页面。但是在github页面上，只有

/

或

/index.html

页面。所以，你得到了404错误

您可能会发现这个答案很有用：

从那里：

两种解决方案：

不要在GitHub页面上使用HTML5历史记录。改用hashHistory。你的 URL看起来像

在路由定义中使用process.env.PUBLIC_URL，以便它们正常工作 无论是在开发中还是部署后。例如：。这将是空的 开发和rcws开发（从主页推断） 生产

我建议切换到散列导航策略，这样您的路线将看起来像

blablabla.com/#game

，而不是

blablabla.com/game

。它会将所有请求路由到您的

index.html

，因此您可以使用React处理路由

---

您可以在React中阅读有关使用HashRouter的更多信息：

谢谢。但我仍然不知道如何用url上的哈希符号替换正斜杠。相反，它被放置在正斜杠和管线之间。你能给我举个例子吗？@envincebal对不起，我的错，我已经改正了这个例子。正确的URL是

blabla.com/#game

，所以你做得很好。请投票并接受我的答案，如果它对你有帮助的话！这是一个很好的解释和方法。

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Nav />
          <div className="container">
            <Switch>
              <Route exact path="/react-game-search" component={MainPage} />
              <Route path="/games" component={GameSearch} />
              <Route  path="/about" component={About} />}
              <Route  path="/details" component={GamesDetails} />}
            </Switch>
          </div>
        </div>
      </Router>
    );
  }
}

const Nav = () => {
  return (
    <div className="navbar">
      <div className="navbar-item">
        <NavLink
          exact to="/react-game-search/"
          activeClassName="selected"
          className="nav-link"
        >Home</NavLink>
      </div>
      <div className="navbar-item">
        <NavLink
           to="/games"
          activeClassName="selected"
          className="nav-link"
        >Games</NavLink>
      </div>
      <div className="navbar-item">
        <NavLink
           to="/about"
          activeClassName="selected"
          className="nav-link"
        >About</NavLink>
      </div>
    </div>
  );
}

class Game extends Component {

  addDefaultSrc = (ev) => {
    ev.target.src = errorIcon;
  }

  render() {
    const { icon, gameTitle, game } = this.props;
    return (
      <div className="game-box">
        <Link
          style={{ textDecoration: 'none' }}
          to={{
            pathname: "/details",
            state: { game }
          }}>
          <div className="game-content">
            <img className="game-icon" onError={this.addDefaultSrc} src={icon} alt="icon" />

            <p className="game-link"><strong>{gameTitle}</strong></p>

          </div>
        </Link>
      </div>
    );
  }

}

ReactDOM.render(<App />, document.getElementById('root'));