我使用React和React Router构建SPA。我也使用https://github.com/facebookincubator/create-react-app因为它是一个非常简单的应用程序。当我使用webpack开发时,我可以看到页面很好。但是,在使用npm run build
中的create-react-app
构建生产后,我正常获取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>
答案 0 :(得分:2)
您正在尝试在静态网页上使用browserHistory
。您应该使用hashHistory
作为静态页面。
首次安装React Router时,它(实际上是它使用的history
模块)会检查当前URL以确定初始位置。使用browserHistory
,这是域之后的任何内容,因此example.com/index.html
的初始位置为/index.html
。
如果您有index.html
的路线,那么当网页加载并且某些内容可能正常工作时,该路线将会匹配。如果您的应用具有<Link>
到/other
路线,您甚至可以点击该路线,并且该网址将更改为example.com/other
。
但是,由于您使用的是静态网页,因此无法链接到example.com/other
。如果有人试图加载该页面,他们会收到404错误,因为服务器没有要提供的/other
页面。
hashHistory
当您使用hashHistory
时,确定位置时考虑的URL的唯一部分是哈希之后的内容。
如果您在使用example.com/index.html
时导航至hashHistory
,则会注意到该网址已更改为example/com/index.html#/
。将为您插入哈希值,并设置为根(/
的绝对路径),如果URL不包含哈希值。
返回前一个<Link>
链接到/other
的示例,当点击该链接时,该网址将更改为example.com/index.html#/other
。现在,如果您直接导航到该URL,服务器将加载example.com/index.html
,React Router将检查哈希值,查看它是#/other
并将初始位置设置为/other
路由。