个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
31
4
我使用 React 和 React Router 构建了一个 SPA。我也在使用 https://github.com/facebookincubator/create-react-app因为它是一个非常简单的应用程序。当我使用 webpack 进行开发时，我可以正常查看页面。但是，在我使用 create-react-app 中的 npm run build 进行生产构建之后，我通常会得到 HTML 文件以及 css 和 js。我将所有内容上传到 S3，但是当我转到该页面时，我只看到空白页面
这就是我看到的
<!-- react-empty: 1 -->
我猜是这样的，因为 S3 默认为 index.html，我无法更改它。 React Router 不知道如何处理 index.html 但我也有 / root 作为默认值，但我仍然看到一个空白页面。不确定如何解决此问题？
这是我的路由器
ReactDOM.render(
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="question2" component={Question2} />
<Route path="question3" component={Question3} />
<Route path="thankyou" component={Thankyou} />
</Route>
</Router>,
document.getElementById('root')
);
这是 creawte-react-app 使用的模板，它在开发中运行良好。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tag above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start`.
To create a production bundle, use `npm run build`.
-->
</body>
</html>
最佳答案
您正在尝试使用 browserHistory在静态网页上。你应该使用 hashHistory 对于静态页面。
当 React Router 首次安装时，它(实际上是它使用的 history 模块)检查当前 URL 以确定初始位置。用browserHistory , 这是域之后的任何内容，所以 example.com/index.html的初始位置将是 /index.html .
如果你有一条通往index.html的路线，当页面加载并且事情可能看起来有效时，它将被匹配。如果您的应用程序有 <Link>到/other路线，您甚至可以点击它，URL 将更改为 example.com/other .
但是，因为您使用的是静态网页，所以无法链接到 example.com/other .如果有人试图加载该页面，他们将收到 404 错误，因为服务器没有 /other。要转换的页面。
hashHistory 当您使用 hashHistory 时，确定位置时唯一考虑的 URL 部分是散列后面的部分。
如果您导航到 example.com/index.html在使用 hashHistory 时，您会注意到 URL 已更改为 example/com/index.html#/ .如果 URL 不包含哈希，则会为您插入哈希并将其设置为根(/ 的绝对路径)。
回到前面的例子，其中一个 <Link>链接到 /other , 单击该链接时，URL 将更改为 example.com/index.html#/other .现在，如果您直接导航到该 URL，服务器将加载 example.com/index.html , React Router 将检查哈希值，发现它是 #/other并将初始位置设置为 /other路线。
关于javascript - 使用 React Route 部署到 S3 后看到空白页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40687493/
31
4
0
这个问题在这里已经有了答案: Why don't Java's +=, -=, *=, /= compound assignment operators require casting? (11 个
我搜索了很多，但没有一个链接能帮助我解决这个问题。我得到了 ORA-21500: internal error code, arguments: [%s], [%s], [%s], [%s], [%s
我正在做 RegexOne 正则表达式教程，它有一个 question关于编写正则表达式以删除不必要的空格。 教程中提供的解决方案是 We can just skip all the starting
([\s\S]+|\s?) 中 |\s? 的目的或作用是什么？如果没有它，表达式会不会与 ([\s\S]+) 相同？ 最佳答案 这不是完全相同的。 ([\s\S]+|\s?) 会匹配空字符串，而 ([
这个正则表达式有一组还是两组？ 我正在尝试使用第二组访问 bookTitle 但出现错误: Pattern pattern = Pattern.compile("^\\s*(.*?)\\s+-\\s+
在 C 中给定一个字符串指针 s，下面的迭代会做什么？即它以什么方式遍历字符串？ for (++s ; *s; ++s); 最佳答案 for (++s ; *s;++s) 表示 将指针 s 递增到字符
我正在用一个 node.js 应用程序解析一个大列表并有这段代码 sizeCode = dbfr.CN_DESC.split('\s+-\s*|\s*-\s+') 这似乎不起作用，因为它返回了 [ '
我正在编写一个简单的字符串连接程序。 该程序按照我发布的方式运行。但是，我首先使用以下代码编写它来查找字符串的结尾: while (*s++) ; 但是，这个方法并没有奏效。我传递给它的字符串
这个问题已经有答案了: What does (?和aramchand来自Mohandas Karamchand G 因此，在使用这些匹配来分割字符串后，您最终会得到 {"M", "K", "G"} 注
我正在尝试转换 Map到 List使用 lambda。 本质上，我想将键和值与 '=' 连接起来之间。这看起来微不足道，但我找不到如何去做。 例如 Map map = new HashMap<>();
我正在经历 K & R，并且在递增指针时遇到困难。练习 5.3(第 107 页)要求您使用指针编写一个 strcat 函数。 在伪代码中，该函数执行以下操作: 将 2 个字符串作为输入。 找到字符串
在下面的代码中，pS 和 s.pS 在最后一行是否保证相等？也就是说，在语句S s = S();中，是否可以确定不会构造一个临时的S？ #include using namespace std; s
演示示例代码: public void ReverseString(char[] s) { for(int i = 0, j = s.Length-1; i < j; i++, j--){
我一直在寻找类似于 .NET examples 中的示例的 PowerShell 脚本.取一个 New-TimeSpan 并显示为 1 天 2 小时 3 分钟 4 秒。排除其零的地方，在需要的地方添加
def func(s): s = s + " is corrected" return s string_list = ["She", "He"] for s in string_li
我是 python 的新手。当我在互联网上搜索 lambda 时。我在 lambda_functions 中找到了这个声明. processFunc = collapse and (lambda s:
我最近开始学习正则表达式，并试图为上面的问题写一个正则表达式。如果限制只放在一个字母上(例如不超过 2 个“b”)，这并不困难。 那么答案就是:a* c*(b|ε)a* c*(b|ε)a* c* 但是
当我运行 npm install 时出现以下错误，但我无法修复它。 我试过:npm install -g windows-build-tools 也没有修复这个错误 ERR! configure
有很多有趣的haskell网上可以找到片段。 This post可以在 this (awesome) Stack Overflow question 下找到. The author写道: discou
我知道以下三行代码旨在将字符串提取到$ value中并将其存储在$ header中。但是我不知道$value =~ s/^\s+//;和$value =~ s/\s+$//;之间有什么区别。 $val
我是一名优秀的程序员,十分优秀！