Windows系统Apache24部署React后BrowserRouter失效问题排查

你的配置里存在以下几个关键问题，导致除首页外的路由出现404：

1. BrowserRouter未配置basename #

应用部署在子目录/coconad下，但BrowserRouter没有指定basename属性，导致路由解析时会从网站根目录开始匹配，而非子目录。

修改App.js：

<div className="App"> 
  <BrowserRouter basename="/coconad" forceRefresh={true}>
    <Route exact path="/" component={Layout} /> 
    <Route exact path="/ContactUs" component={ContactUsForm} />
    <Route exact path="/Aboutus" component={Aboutus} />
  </BrowserRouter>
</div>

注：路由路径简化为"/"、"/ContactUs"后，会自动和basename拼接成/coconad/ContactUs，和原路径效果一致。

2. .htaccess配置错误 #

• FallbackResource指向了错误文件（/index.js），应指向应用入口index.html
• RewriteRule的目标路径未包含子目录/coconad，导致Apache会从网站根目录查找index.html，而非/coconad下的文件

修改.htaccess（位于htdocs/coconad目录下）：

FallbackResource /coconad/index.html
<IfModule mod_rewrite.c>
  Options -MultiViews
  
  RewriteEngine On
  
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^ /coconad/index.html [QSA,L]
</IfModule>

添加RewriteCond %{REQUEST_FILENAME} !-d可排除真实存在的目录，避免误重写。

3. package.json的homepage配置不规范 #

homepage属性缺少开头的斜杠，可能导致构建时资源路径解析错误。

修改package.json：

{
  "name": "coconad",
  "homepage": "/coconad",
  "version": "0.1.0",
  // ...其他配置
}

4. 路由嵌套逻辑优化（可选） #

当前Layout路由使用了exact属性，导致子路由无法嵌套在Layout中渲染（无法共享Header和Footer）。如果需要所有路由复用Layout布局，可调整如下：

修改App.js：

<div className="App"> 
  <BrowserRouter basename="/coconad" forceRefresh={true}>
    <Route path="/" component={Layout}>
      <Route exact path="/" component={Home} />
      <Route exact path="/ContactUs" component={ContactUsForm} />
      <Route exact path="/Aboutus" component={Aboutus} />
    </Route>
  </BrowserRouter>
</div>

同时修改Layout.js，移除内部<Home />渲染，让子路由通过this.props.children渲染：

import React from "react"
import Header from "./Header/Header"
import Footer from "./Footer/Footer"
import "./../../index.css";

class Layout extends React.Component {
  render(){
    return (
      <>
        <Header /><br/>
        <main>{this.props.children}</main>
        <Footer />
      </>
    )
  }
}
export default Layout;

完成以上修改后，重新构建React应用（npm run build），将build目录文件替换到Apache的htdocs/coconad目录，重启Apache服务即可解决路由404问题。

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