刷新时React router 2.0 browserHistory不工作
刷新第页时未找到以下代码报告404http://localhost/about.但如果将browserHistory更改为hashHistory，它就可以正常工作。
这是我的js文件。
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory, hashHistory } from 'react-router';
import $ from 'jquery';
class App extends Component {
render() {
return (
<div>
<h1>APP!</h1>
<Link to="/about">/about</Link>
{this.props.children}
</div>
)
}
}
class About extends React.Component {
render() {
return (
<div>
<h2>About 33</h2>
</div>
)
}
}
var routes = (
<Router history={hashHistory}>
<Route path="/" component={App} />
<Route path="/about" component={About} />
<Route path="/wealth" component={WealthExpectation} />
</Router>
)
$(document).ready(function() {ReactDOM.render(routes, document.getElementById("hello"))});
和html文件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello React</title>
<script type="text/javascript" src="/static/js/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="/static/js/script.js"></script>
<!-- build:css -->
<link rel="stylesheet" type="text/css" href="/static/bower_modules/c3/c3.min.css">
<!-- endbuild -->
</head>
<body>
<div id="hello">a</div>
<div id="world"></div>
</body>
</html>
共有3个答案
当您使用浏览器历史记录时，服务器不知道如何处理仅在浏览器中更改的URL。本教程将教您如何删除url中的#并使浏览器历史记录工作。
另一种简单且低成本的方法是让Apache将任何请求映射到您的React应用程序。例如：http://localhost/about在内部通过http://localhost/[my-own-html-file.html]
例如，如果我们的React应用程序从index.html开始，您需要在您的React应用程序上创建一个. htaccess文件并插入以下代码：
# Map all non-existing URLs to be processed by index.html,
# so any URL that doesn't point to a JS file, CSS file, etc etc...
# goes through my React app.
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !=/favicon.ico
RewriteRule ^ index.html [L]
</IfModule>
顺便说一句，此HTACCESS代码改编自Drupal 8：https://github.com/drupal/drupal/blob/8.2.x/.htaccess
进一步介绍Phi Nguyen的答案，hashHistory有效而browserHistory失败的原因是因为hashHistory是一种“黑客”或变通方法，允许你的应用程序操纵URL，而浏览器不会注意到并向你的服务器发送GET请求。基本上，哈希之后的所有内容都被忽略。
browserHistory通常是首选，因为它看起来更好，但您不再需要哈希解决方法，并且您需要其他方法来阻止浏览器尝试向服务器发送请求。如果您使用的是webpack，那么有一种简单的方法可以让所有请求返回到单个请求。例如：
获取http://localhost:8080/和获取http://localhost:8080/about双方都会退回到http://localhost:8080/和反应路由器将处理/关于。（这就是您能够导航到/关于fine的原因，但如果刷新，则会出现404错误，您正在向/发送服务器上不存在的get（获取）错误）
为此，您需要实现一个名为历史api回退的webpack功能。有两种方法可以做到这一点。
从react router文档/教程中，您可以将脚本设置为如下所示：
"start": "webpack-dev-server --inline --content-base . --history-api-fallback"
其中--history api回退对于任何有此错误的人来说都是非常重要的。
或者您可以更改您的webpack.config.js文件以在您的开发服务器上查看处理此问题。
devServer: {
historyApiFallback: true,
...other stuff..
},
-
我有一个ASP。net core 3.1 MVC应用程序，使用OpenID连接Identity Server 4。我正在使用IdentityModel自动刷新应用程序中的访问令牌。配置如下所示： 我有一个控制器，它将从使用该标识服务器保护的下游应用编程接口中提取数据。我的MVC客户端请求范围api1和offline_access来获取刷新令牌。这些令牌存储在cookie中，因为服务上设置了。 一切
-
我使用的是Spring Boot v2。5.2微服务并尝试动态刷新endpoint。我正在使用Spring Cloud API Gateway并实现了安全性，现在当我http://localhost:8012/actuator/busrefresh，我看到只有Spring Cloud API gateway反映了这些变化，但其他微服务没有。 我们如何修复它？ Spring Cloud API网关
-
问题内容： 我有一个文件，其中我在页面顶部显示外部页面（使用iframe），其他部分是写在文件中的html代码的输出。 HTML代码如下所示： 现在，我想以编程方式刷新页面而不刷新。 我的问题是我可以不刷新页面就刷新页面吗？ 答案/提示将不胜感激。 问题答案： 该嵌在主HMTL页面（或在JSP）。因此，如果刷新页面，则肯定会再次加载iframe。 为了避免这种情况，我可以考虑以下两种选择： 使用A
-
我遵循了这个官方教程使用Spring boot 2.0.0开始集中配置。RELEASE和Spring cloud Finchley。M8 但是动态刷新属性（不重新启动）不起作用。经过一些调试，我注意到ContextRefresh中的refresh（）方法。类，它将正确返回更改后的键，但在下次使用中重建用@RefreshScope注释的bean之后。它仍然看到旧的值，而不是更新的值。 注意：这与Sp
-
我最近用Google节点模块“sw-precache”生成的服务工作者制作了我的第一个渐进式web应用程序（我在演示中使用了Gulp任务）。一切工作良好，我能够导航通过网页应用当我离线使用Chrome在移动或使用Chrome创建的图标使用“添加到主屏幕”选项（我的渐进式网页应用）。 我只有一个奇怪的问题：如果我离线了，我用Chrome刷新页面，它仍然可以工作，但如果我用pwa做同样的事情，它会显示
-
问题内容： 在Java程序（Java 1.5）中，我有一个BufferedWriter，它包装了Filewriter，并且多次调用write（）…结果文件很大… 在此文件的各行中，其中一些是不完整的… 我每次写东西时都需要调用flush（但是我怀疑这样做效率不高）还是使用BufferedWriter的另一种方法还是使用另一种类…？ （由于我要编写的行数不胜数，所以我确实希望有一些高效的东西。）理想