当我在本地服务器上重新加载应用程序时,一切都很好。但是当我在gh页上托管时重新加载页面时,出现404错误。它不在主页上执行此操作,但在其他两个页面上执行此操作。它与远程托管有关吗?我对React Router有点陌生。任何帮助将不胜感激。以下是相关代码和指向我的应用的链接:
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'));
答案 0 :(得分:2)
这是因为,例如,当您重新加载页面时,它会尝试访问/games
页面。但是在github页面上,只有/
或/index.html
页面。因此,您收到404错误。
您可能会发现此答案很有帮助:https://github.com/facebook/create-react-app/issues/1765#issuecomment-285114194
从那里:
两种解决方案:
不要在GitHub页面上使用HTML5历史记录。请改用hashHistory。您的 网址看起来像 https://rockchalkwushock.github.io/rcws-development/#path/inside/the/app。
在您的路线定义中使用process.env.PUBLIC_URL以便它们起作用 无论是在开发中还是在部署后。例如: 。这将是空的 开发和rcws-development(从首页推断) 生产。
我建议您切换到哈希导航策略,这样您的路线将看起来像blabla.com/#game
而不是blabla.com/game
。它将所有请求路由到您的index.html
,因此您可以使用React处理路由。
您可以在此处阅读有关在React中使用HashRouter的更多信息:https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md