React路由在Netlify生产环境仅Chrome可用，Safari等浏览器报404

你的问题主要来自两个核心点：

1. React Router与Materialize组件的混用错误：你在NavItem上同时添加了href和react-router-dom的to属性，不同浏览器对这种混合写法的解析逻辑不一致——部分浏览器会优先触发href的硬跳转，而Netlify服务器上根本没有/services、/works这类路径对应的静态文件，直接返回404；
2. Netlify单页应用路由配置缺失：React Router属于客户端路由，当用户直接在地址栏输入非根路径（比如/services）或刷新页面时，Netlify会默认去服务器找对应的物理文件，找不到就返回404，需要配置重写规则让所有路径都指向React应用的入口页面。

另外代码里还有个细节错误：to="works"应该写成to="/works"，相对路径在嵌套路由场景下容易出问题，统一用绝对路径更稳妥。

1. 修正NavItem的路由用法 #

Materialize的NavItem可以通过component属性绑定react-router-dom的Link组件，这样就能完全走客户端路由，避免硬跳转触发服务器请求。修改后的代码如下：

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 component={Link} to="/">About Me</NavItem>
          <NavItem component={Link} to="/services">My Services</NavItem>
          <NavItem component={Link} to="/works">My Works</NavItem>
          <NavItem component={Link} to="/videos">My Videos</NavItem>
          <NavItem component={Link} to="/request">Request a Quote</NavItem>
        </Navbar>
      </div>
    )
  }
}

export default NavBar;

这里移除了所有href属性，改用component={Link}绑定React Router的路由组件，确保所有跳转都由客户端处理。

2. 添加Netlify重写配置 #

在项目根目录创建一个名为_redirects的无后缀文件，写入以下规则：

/*    /index.html   200

这条规则的作用是：将所有访问路径（/*）都重写到根目录的index.html，并返回200状态码。这样无论用户访问哪个路径，Netlify都会返回React应用的入口文件，再由React Router在客户端完成路由匹配。

3. 确保配置文件被正确打包 #

如果你的项目是Create React App创建的，把_redirects文件放在public目录下，打包时会自动复制到构建产物的根目录；如果是其他构建工具，确保该文件最终出现在dist（或对应构建输出目录）的根目录。

完成以上三步后重新部署站点到Netlify，所有浏览器就能正常访问各个路由了。

内容的提问来源于stack exchange，提问作者codemt