React路由直接访问报404，NavLink跳转正常问题求助

这个问题的核心是React单页应用(SPA)的客户端路由特性：

• 通过<NavLink>跳转时，路由由react-router-dom在浏览器端处理，不会向服务器发送新的HTTP请求，因此能正常匹配路由规则。
• 直接在地址栏输入路径时，浏览器会向服务器发起对应路径的GET请求，而服务器上并没有/shop这类路径的静态文件，所以返回404错误。

一、规范路由配置（可选优化） #

你的嵌套路由写法可以更简洁规范：父路由已用path="/*"捕获所有根路径请求，子路由可改用相对路径，避免重复根路径符号：

// CustomerLayout.js
const CustomerLayout = () => {
  return (
    <div>
      <MainHeader />
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="shop" element={<Shop />}></Route> {/* 去掉前缀/ */}
        <Route path="product-detail/:slug" element={<ProductDetail />}></Route>
        <Route path="cart" element={<Cart />}></Route>
        <Route path="login" element={<Login />}></Route>
      </Routes>
      <MainFooter />
    </div>
  )
}

注意：这只是写法优化，并非404问题的核心解决手段。

二、服务器端配置（核心解决） #

必须让服务器将所有路由请求转发到index.html，交由React客户端路由处理。以下是常见场景的配置方案：

1. Create React App构建项目

• 先在package.json中添加homepage字段（确保构建路径正确）：

{
  "homepage": "."
}

• 执行npm run build生成生产包后，根据部署的服务器类型配置：
  • Apache服务器：在项目根目录创建.htaccess文件，内容如下：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

• Nginx服务器：在站点配置的location块中添加：

location / {
  try_files $uri $uri/ /index.html;
}

2. Vite构建项目

• 在vite.config.js中配置base（部署在根路径设为'/'，子路径对应修改）：

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/'
})

• 服务器配置同上述Apache/Nginx规则。

3. 本地开发环境临时处理

如果本地开发时遇到该问题，Create React App的开发服务器默认支持路由 fallback，无需额外配置；若使用自定义Webpack开发服务器，需在配置中添加：

// webpack.config.js
devServer: {
  historyApiFallback: true,
}

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