我愿意为我的应用程序使用React-router,我首先尝试了文档中给出的示例,我复制了下面的内容。现在当我转到localhost:3000/
时,我看到了预期的“App”,但每隔一页,例如localhost:3000/inbox
,都会返回“Cannot GET /inbox”。我错过了什么?
var About = React.createClass({
render: function () {
return <h2>About</h2>;
}});
var Inbox = React.createClass({
render: function () {
return <h2>Inbox</h2>;
}});
var App = React.createClass({
render () {
return (
<div><h1>App</h1>
<RouteHandler/>
</div>
)}});
var routes = (
<Route path='/' handler={App}>
<Route path="about" handler={About}/>
<Route path="inbox" handler={Inbox}/>
</Route>
);
7条答案
按热度按时间vngu2lb81#
如果您使用的是
webpack-dev-server
,则有一个名为history-api-fallback
的选项。如果设置为true
,则404s将回退到/index.html
。将选项添加到Webpack配置的
devServer
部分,如下所示:Webpack文档链接:https://webpack.js.org/configuration/dev-server/
Github上的
webpack-dev-server
文档:https://github.com/webpack/webpack-dev-serverwixjitnu2#
我认为问题在于您正在进行http资源请求:
但只使用客户端路由。您是否也打算进行服务器端渲染?您可能需要将路由器位置更改为
HistoryLocation
,而不是HashLocation
(默认值)。Router.run
的位置属性告诉它在哪里匹配路由。如果你没有运行服务器端的React,我相信你必须使用Router.HashLocation
(或者干脆把它留空)。如果没有,您访问组件的方式是错误的。请尝试使用
http://localhost:3000/#/inbox
。熟悉React-Router可能需要一点时间,但绝对值得!React路由器文档-哈希位置
vpfxa7rd3#
最简单的选项:我使用哈希历史代替。网址停留不是很好,如果你需要更好的搜索引擎优化,我会选择服务器端渲染以及。
如果你对此感兴趣,这个答案对我很有帮助:React-router urls don't work when refreshing or writting manually
o4hqfura4#
请求将被发送到服务器,而目录/文件并不存在,所以它将返回404,所以你必须告诉服务器返回所有请求的索引页,react将处理根:
如果您像我一样,将Reactor应用程序托管在IIS上,只需添加一个web.config文件,其中包含:
这将告诉IIS服务器将主页返回给客户端,而不是404错误。
swvgeqrz5#
我遇到了同样的问题,如果你有一个服务器,响应请求和HashRouter,如果你使用静态文件服务器。而不是使用BrowserRouter使用HashRouter它不是完美的修复,但应该解决无法获得"/路径"错误。一定要导入HashRouter从'react-router-dom'
来源:https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/basic-components.md
c2e8gylq6#
为了补充那些没有得到答案的人:
historyApiFallback: true
只适用于url的第一级,所以site.com/about
会被重定向到index,而site.com/about/me
不会,在这种情况下,需要添加rewrite
选项:这将使用正则表达式匹配所有路由。注意还要添加以下内容:
否则,重定向将工作到index.html,但index.html可能只有
bundle.js
作为webpacked脚本,并且将无法正确读取。它应该改为'/bundle.js'
,这一配置选项将做到这一点。f5emj3cl7#
我也遇到了同样的问题。使用webpack-dev-server很好,但使用express不行。问题出在Express.js版本中。我没有注意到它是beta(5.0.0-beta.1)
解决方案是升级/降级到稳定版本(4.18.2工作正常)。
希望能有所帮助!