手动刷新或写入时,React-router网址不起作用
我正在使用React-router,当我单击链接按钮时,它可以正常工作,但是当我刷新网页时,它不会加载我想要的内容。
例如,我进去了localhost/joblist
,一切都很好,因为我按链接到达这里。但是,如果刷新网页,则会得到:
Cannot GET /joblist
默认情况下,它不是这样工作的。最初,我的URL为localhost/#/
,localhost/#/joblist
并且它们工作正常。但是我不喜欢这种URL,因此尝试删除它#
,我写道:
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.body);
});
这个问题不会发生localhost/
,这个总是返回我想要的。
编辑:这个程序是单页的,所以/joblist
不需要向任何服务器询问任何内容。
EDIT2:我的整个路由器。
var routes = (
<Route name="app" path="/" handler={App}>
<Route name="joblist" path="/joblist" handler={JobList}/>
<DefaultRoute handler={Dashboard}/>
<NotFoundRoute handler={NotFound}/>
</Route>
);
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.body);
});
使用Redux也
HashRouter
对我有用,只需替换:至:
对于使用IIS 10的用户,这是您应该做的以实现此目的的方法。确保与此同时使用browserHistory。作为参考,我将给出用于路由的代码,但这并不重要,重要的是下面的组件代码之后的下一步:
由于问题是IIS收到来自客户端浏览器的请求,因此它将好像请求页面一样解释URL,然后由于没有可用的页面而返回404页面。请执行下列操作:
现在它将正常工作。
希望对您有所帮助。:-)
当我使用.Net Core MVC时,类似以下内容对我有所帮助:
基本上在MVC端,所有不匹配的路由都将落入
Home/Index
所指定的位置startup.cs
。在内部Index
可以获取原始请求url并将其传递到任何需要的地方。如果您在IIS中托管;将此添加到我的webconfig中解决了我的问题
您可以对其他任何服务器进行类似的配置
这个主题有点老了,已经解决了,但是我想向您推荐一个简单,清晰和更好的解决方案。如果您使用Web服务器,则可以使用。
每个Web服务器都具有在http 404的情况下将用户重定向到错误页面的功能。要解决此问题,您需要将用户重定向到索引页面。
如果使用Java基本服务器(tomcat或任何java应用程序服务器),则解决方案可能是以下几种:
web.xml:
例:
就是这样,不再需要魔术:)
我还没有使用服务器端渲染,但是遇到了与OP相同的问题,在大多数情况下,Link似乎可以正常工作,但是当我有参数时失败了。我将在此处记录我的解决方案,以查看它是否对任何人都有帮助。
我的主要jsx包含以下内容:
这对于第一个匹配的链接来说效果很好,但是当:id更改
<Link>
嵌套在该模型的详细信息页面上的表达式时,浏览器栏中的url会更改,但是页面的内容最初并未更改以反映链接的模型。麻烦的是我曾用来
props.params.id
设置模型componentDidMount
。该组件仅安装一次,因此这意味着第一个模型是粘贴在页面上的模型,随后的Links更改了道具,但页面看起来没有变化。将模型同时设置为组件状态
componentDidMount
和componentWillReceiveProps
基于组件的状态(此处基于下一个道具)将解决该问题,并且页面内容会更改以反映所需的模型。我找到了带有React Router(Apache)的SPA解决方案。只需添加.htaccess
来源:https : //gist.github.com/alexsasharegan/173878f9d67055bfef63449fa7136042
如果您使用的是Firebase,则只需确保在应用程序根目录(在托管部分中)的firebase.json文件中具有rewrites属性。
例如:
希望这可以节省别人的挫折感和浪费的时间。
祝您编程愉快!
关于该主题的进一步阅读:
https://firebase.google.com/docs/hosting/full-config#rewrites
Firebase CLI:“配置为单页应用程序(将所有URL重写为/index.html)”
如果您使用的是Create React App:
有一个伟大的步行路程,虽然这个问题与许多大型主机平台的解决方案,你可以找到这里的创建做出反应应用页面上。例如,我将React Router v4和Netlify用作前端代码。只需要在我的公用文件夹中添加一个文件(“ _redirects”),然后在该文件中添加一行代码即可:
现在,当输入浏览器或有人刷新时,我的网站可以正确呈现诸如mysite.com/pricing之类的路径。
尝试使用以下代码在公用文件夹内添加“ .htaccess”文件。
如果确实有index.html的备用版本,请确保在index.html文件中具有以下内容:
这可能因项目而异。
如果您在IIS上托管react应用,只需添加一个web.config文件,其中包含:
这将告诉IIS服务器将主页返回到客户端而不是404错误,并且不需要使用哈希历史记录。
Webpack Dev Server具有启用此功能的选项。打开
package.json
并添加--history-api-fallback
。该解决方案为我工作。反应路由器教程
将此添加到
webpack.config.js
:这样可以解决你的问题
在生产模式下的ReactJS应用程序中,我也遇到了同样的问题。这是该问题的2个解决方案。
1.将路由历史更改为“ hashHistory”,而不是用browserHistory
现在使用命令构建应用
然后将build文件夹放在您的var / www /文件夹中,现在该应用程序可以正常工作,在每个URL中添加#标签。喜欢
本地主机/#/ home本地主机/#/ aboutus
解决方案2:不使用浏览器历史记录#标签,
在路由器中设置您的历史= {browserHistory},现在使用sudo npm run build对其进行构建。
您需要创建“ conf”文件来解决“ 404找不到页面”,conf文件应如下所示。
打开您的终端,键入以下命令
cd / etc / apache2 / sites-available ls nano sample.conf在其中添加以下内容。
现在,您需要使用以下命令来启用sample.conf文件
然后它将要求您使用sudo服务apache2重新加载或重新启动apache服务器
然后打开您的localhost / build文件夹并添加内容如下的.htaccess文件。
现在,该应用程序可以正常运行。
注意:将0.0.0.0 ip更改为您的本地IP地址。
如果对此有任何疑问,请随时提出评论。
希望对其他人有帮助。
如果您通过AWS Static S3 Hosting和CloudFront托管React应用
CloudFront响应403 Access Denied消息后就出现了此问题,因为它希望/ some / other / path存在于我的S3文件夹中,但该路径仅存在于React的使用react-router的路由内部。
解决方案是设置分发错误页面规则。转到CloudFront设置,然后选择您的分配。接下来转到“错误页面”标签。单击“创建自定义错误响应”并添加403的条目,因为这是我们得到的错误状态代码。将“响应页面路径”设置为/index.html并将状态码设置为200。最终结果以其简单性令我惊讶。提供了索引页面,但URL保留在浏览器中,因此,一旦React应用加载,它将检测URL路径并导航到所需的路由。
错误页面403规则
我刚才使用create-react-app制作了一个网站,并在此处遇到了同样的问题。我
BrowserRouting
从react-router-dom
包装中使用。我在Nginx服务器上运行,对我来说解决了什么是将以下内容添加到/etc/nginx/yourconfig.conf
这对应于
.htaccess
在运行Appache的情况下将以下内容添加到这似乎也是Facebook自己建议的解决方案,可以在这里找到
在index.html中
head
,添加以下内容:然后,当与webpack dev服务器一起运行时,请使用此命令。
--history-api-fallback
是重要的部分您可以更改
.htaccess
文件并插入以下内容:我正在使用
react: "^16.12.0"
并且react-router: "^5.1.2"
这种方法是万能的,可能是入门的最简单方法。你的回答