- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当我在本地服务器上重新加载我的应用程序时,一切正常。但是当我在 gh-pages 上托管时重新加载页面时,我收到 404 错误。它不会在主页上执行此操作,但会在其他 2 个页面上执行此操作。它与它被远程托管的事实有关吗?我对 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'));
最佳答案
那是因为当您重新加载页面时,它会尝试访问 /games
页面。但是在github页面上,只有/
或者/index.html
页面。所以,您收到 404 错误。
您可能会发现此答案有帮助:https://github.com/facebook/create-react-app/issues/1765#issuecomment-285114194
从那里:
Two solutions:
Don’t use HTML5 history on GitHub pages. Use hashHistory instead. Your URLs will look like https://rockchalkwushock.github.io/rcws-development/#path/inside/the/app.
Use process.env.PUBLIC_URL in your route definitions so that they work both in development and after deployment. For example: . This will be empty in development and rcws-development (inferred from homepage) in production.
我建议切换到散列导航策略,这样您的路线将看起来像 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
关于reactjs - 重新加载 React Router 应用程序时出现 404 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53356587/
This question already has an answer here: Character constant too long for it's type (1个答案) 1年前关闭。 我是
每次我执行 Scala 程序时,Eclipse 都会创建一个新的“运行配置”。这样做的问题是我需要自定义默认的运行配置(需要更改工作路径)。因此,我第一次创建和自定义运行配置时一切正常,但任何后续尝试
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗?更新问题,以便 editing this post 可以用事实和引文来回答它。 . 已关闭 5 年前。 Improv
基本上我正在做的是创建一个充当启动器的 swing 应用程序。它所做的只是为用户提供了 3 个选项,他们可以从中选择打开一个新的 java 应用程序。 3 个不同的 java 应用程序都有不同的主题,
这个问题已经有答案了: Make a py2exe exe run without a console? (2 个回答) 已关闭 9 年前。 我不希望在打开 python 应用程序时在后台打开 cmd
我曾经尝试编译一个我为国际象棋游戏编写的 C 程序(感谢 YouTube 的 Bluefever Software 提供的教程),但是当我去编译该程序时,我执行了这行代码: C:\TDM-GCC-64
这是一段代码,通过从一个文件获取输入并在另一个文件中给出输出来执行数字的平方。 #include #include void main() { FILE *fp1, *fp2; char
#include using namespace std; class foo { private: static int cnt; // number in memory stat
我做了一个简单的 hello world 程序。我单击“开始调试”,窗口显示“项目已过期。您要构建它吗?”当我单击"is"时,下一个窗口显示“存在构建错误。您要继续并运行上次成功的构建吗?”。我再次选
这是一个程序,有人在其中输入密码并尝试三次猜密码。当我编译它时,我遇到了多个错误,其中一个包括第 13 行,它基本上说它找不到包含在 Password_Program 类中的类似函数。 #includ
我想将我的游戏导出到 .jar 文件中。它导出;当我运行它时,框架出现了,但面板没有加载。我的框架和面板位于两个不同的类文件中,但我认为这没有什么区别。而且,它在 Eclipse 中完全可以工作。我在
我粘贴了程序以从 codenameone 开发人员指南中创建一个按钮,并且我在 netbeans 中使用了该代码,但是当我单击“运行”时,它在模拟器中没有显示任何内容 最佳答案 您删除了 hi.sho
当我执行这个程序时,它并没有终止。 例如,如果我给它输入 A,输出将是: 65 7 1000001 0 65 7 1000001 ... 我的代码: #include #include void
考虑下面的基本客户端和服务器程序(只是骨架/说明我的问题)。客户端启动与服务器的连接,提示用户输入消息,然后发送到服务器并打印到屏幕。 如果我在循环中间突然退出客户端程序(例如通过关闭终端窗口),有时
我运行一个非常简单的单线程 Java 程序。当我在 Ubuntu 下使用命令检查线程时 ps -eLf 它显示操作系统级别有 14 个线程。我希望当程序有一个线程时只有一个线程,如果程序有 x 个线程
当我从命令行运行类似以下内容的代码时,真正发生了什么? > scala hello.scala 是否有hello.class生成,执行然后丢弃?还是在这种情况下Scala表现得像翻译一样?我只是在想,
程序正在从网络摄像机接收以字节为单位的图像数据,然后处理图像。程序第一次启动时使用470Mb RAM,每1秒增加到15Mb,一直持续到没有足够的空间而计算机挂起。 方法 getImage() 每 10
当我运行我的 selenium 程序时,它显示错误,如何解决这个问题? import org.openqa.selenium.By; public class sss { public sta
我写了一个简单的程序,试图查看内存中的变化,但没有任何变化。无论我是否运行代码,总是会出现大约 20% 左右的直线水平线。 #include using namespace std; int main
我是 c/c++ 领域的新手,我已经在虚拟机上沉迷太久了。 我正在修改我们在整个公司使用的现有 C++ 工具。该工具正在所有主要操作系统(Windows、Mac、Ubuntu、Solaris 等)上使
我是一名优秀的程序员,十分优秀!