我有非 SPA 服务器端应用程序和仅限于当前页面的 React 应用程序，/some/static/page . 应用程序有 <base href="/">在 <head>在所有页面上并依赖于它，这是无法更改的。
这是 React 16、React Router 4 和 <HashRouter> 的基本示例:
export class App extends React.Component {
render() {
return (
<HashRouter>
<div>
<Route exact path="/" component={Root} />
</div>
</HashRouter>
);
}
}
出于测试目的，可以禁用所有路由，但这不会改变行为。
Here is create-react-app project这表明了问题。复制它的步骤是:
npm i npm start http://localhost:3000/some/static/page HashRouter 明显受到 <base> 的影响.它从 /some/static/page 重定向至 /#/在初始化时，我希望它是 /some/static/page#/或 /some/static/page/#/ (仅在 IE 11 中按预期工作)。
Root 快速飞溅重定向到 /#/ 之前的组件.
它重定向到/foo/#/如果是 <base href="/foo"> , 它重定向到 /some/static/page/#/什么时候<base>标签已删除。
该问题影响 Chrome 和 Firefox(最新版本)，但不影响 Internet Explorer (IE 11)。
为什么是<HashRouter>受 <base> 影响？它在这里使用正是因为它不应该影响位置路径，只会影响哈希。
如何解决这个问题？
最佳答案
其实这个来自history .如果你看到 their code , 他们只使用 createHashHistory并设置 children .所以它等同于:
import React from 'react';
import { Route, Router } from 'react-router-dom';
import { createHashHistory } from 'history';
const Root = () => <div>Root route</div>;
export default class App extends React.Component {
history = createHashHistory({
basename: "", // The base URL of the app (see below)
hashType: "slash", // The hash type to use (see below)
// A function to use to confirm navigation with the user (see below)
getUserConfirmation: (message, callback) => callback(window.confirm(message)),
});
render() {
return (
<Router history={this.history}>
<div>Router
<Route exact path="/" component={Root} />
</div>
</Router>
);
}
}
它将显示您遇到的相同问题。那么如果你改变 history代码如下:
import {createBrowserHistory } from 'history';
...
history = createBrowserHistory({
basename: "", // The base URL of the app (see below)
forceRefresh: false, // Set true to force full page refreshes
keyLength: 6, // The length of location.key
// A function to use to confirm navigation with the user (see below)
getUserConfirmation: (message, callback) => callback(window.confirm(message))
});
那么你的问题就会消失，但绝对不能使用 hash .所以问题不在于
HashRouter但来自 history .
因为这个来自history ，让我们看看这个 thread .阅读该主题后，我们可以得出结论，这是来自 history 的功能 .
因此，如果您设置 <base href="/"> ，因为您正在使用 hash (#)，当浏览器加载时(实际上是在 componentDidMount 之后)它会附加 hash (#) 在你的情况下 some/static/page => some/static/page + / => / + #/ => /#/ .可以打卡componentDidMount设置 debugger在追加路线之前 catch 。
简单地说，删除元素<base href>或者不要使用 HashRouter .
如果仍然需要但希望避免特定的 component , 把这个放在 class 之前:
const base = document.querySelector("base");
base.setAttribute('href', '');
因为你想保留base标记以保持持久链接并使用 hash路由器，这是我认为最接近的解决方案。
<强>1。设置标签 base清空。
const base = document.querySelector('base');
base.setAttribute('href', '');
将该代码放入 App组件(根包装组件)调用一次。
<强>2。当componentDidMount把它放回去
componentDidMount() {
setTimeout(() => {
base.setAttribute('href', '/');
}, 1000);
}
使用超时等待 react 完成渲染虚拟 dom。
我认为这非常接近(已测试)。因为你正在使用 hash路由器，来自索引 html 的链接将是安全的(不会被 react 覆盖，但会保留 base 标签)。它也适用于 css 链接 <link rel="stylesheet" href="styles.css">
关于javascript - React Router 的 HashRouter 重定向到 <base> 标签 url，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49467305/
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为
从给定URL下载文件并立即将其上传到AmazonS3的更直接的方法是什么(+将有关文件的一些信息保存到数据库中，例如名称、大小等)？现在，我既不使用Paperclip，也不使用Carrierwave。谢谢 最佳答案 简单明了:require'open-uri'require's3'amazon=S3::Service.new(access_key_id:'KEY',secret_access_key:'KEY')bucket=amazon.buckets.find('image_storage')url='http://www.ex
我正在编写一个小脚本来定位aws存储桶中的特定文件，并创建一个临时验证的url以发送给同事。(理想情况下，这将创建类似于在控制台上右键单击存储桶中的文件并复制链接地址的结果)。我研究过回形针，它似乎不符合这个标准，但我可能只是不知道它的全部功能。我尝试了以下方法:defauthenticated_url(file_name,bucket)AWS::S3::S3Object.url_for(file_name,bucket,:secure=>true,:expires=>20*60)end产生这种类型的结果:...-1.amazonaws.com/file_path/file.zip.A
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request
我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我正在尝试在Ruby中复制Convert.ToBase64String()行为。这是我的C#代码:varsha1=newSHA1CryptoServiceProvider();varpasswordBytes=Encoding.UTF8.GetBytes("password");varpasswordHash=sha1.ComputeHash(passwordBytes);returnConvert.ToBase64String(passwordHash);//returns"W6ph5Mm5Pz8GgiULbPgzG37mj9g="当我在Ruby中尝试同样的事情时，我得到了相同sha
我正在使用RubyonRails3.0.9，我想生成一个传递一些自定义参数的link_toURL。也就是说，有一个articles_path(www.my_web_site_name.com/articles)我想生成如下内容:link_to'Samplelinktitle',...#HereIshouldimplementthecode#=>'http://www.my_web_site_name.com/articles?param1=value1¶m2=value2&...我如何编写link_to语句“alàRubyonRailsWay”以实现该目的？如果我想通过传递一些
我想使用spawn(针对多个并发子进程)在Ruby中执行一个外部进程，并将标准输出或标准错误收集到一个字符串中，其方式类似于使用Python的子进程Popen.communicate()可以完成的操作。我尝试将:out/:err重定向到一个新的StringIO对象，但这会生成一个ArgumentError，并且临时重新定义$stdxxx会混淆子进程的输出。 最佳答案 如果你不喜欢popen，这是我的方法:r,w=IO.pipepid=Process.spawn(command,:out=>w,:err=>[:child,:out])