Reactjs URL无法在Safari浏览器上运行,仅适用于生产模式下的Chrome浏览器 - Netlify

时间:2018-05-28 16:45:26

标签: reactjs react-router netlify netlify-cms

我在netlify中部署了一个静态站点,但我在开发模式中定义的路由只在chrome浏览器中运行,其他浏览器返回404 - 找不到页面。

import React, { Component } from 'react';
import { Navbar , NavItem } from 'react-materialize';
import { Link } from 'react-router-dom';
class NavBar extends Component {
  render() {
    return (
        <div>
            <Navbar brand='MT' right style={{backgroundColor:'#7f8fa6'}}>
            <NavItem  href="/" to="/">About Me</NavItem>
            <NavItem  href="/services" to="/services">My Services</NavItem>
            <NavItem href="/works" to="works">My Works</NavItem>
            <NavItem  href="/videos" to="videos">My Videos</NavItem>
            <NavItem href="/request" to="request">Request a Quote</NavItem>
             </Navbar>
      </div>
    )
  }
}
export default NavBar;

这是我的Netlify网址。 https://mithilesh-tarkar.netlify.com/

它在移动设备和笔记本电脑上的Chrome浏览器上打开。 但它并没有在safari和firefox上打开。为什么这样呢?可以有人帮忙。

1 个答案:

答案 0 :(得分:1)

索引页面是react路由器可以处理路由的地方,我认为会出现这个问题,因为如果您不采取以下步骤而以某种方式说出'/ store',它实际上会将您路由到'/ store'而不是你的反应路线从索引页面开始,为什么它在某些浏览器而不是其他浏览器上工作,我不确定。很想知道。

通过检查您的网站,(不错的网站),您似乎已经弄明白了。

但访问此页面时遇到同样问题的其他人可能会尝试在名为_redirects的公用文件夹中创建一个文件。

然后在该文件中添加:

/ * /index.html 200

更多信息可以在这里找到: https://www.crookm.com/2018/02/one-page-app-routing-on-netlify.html

https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps