我使用 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/