React Router Dom打包部署Apache后BrowserRouter路由跳转始终返回主页求解

1. 配置package.json的homepage字段 #

在项目根目录的package.json中添加homepage配置，指定项目部署的子路径，修改后重新执行npm run build打包：

{
  "homepage": "/agenda-landing"
}

该配置会自动修正打包后静态资源的引用路径，适配子目录部署场景。

2. 给BrowserRouter添加basename属性 #

指定路由的基础路径和部署子目录保持一致，Route的path不需要额外加agenda-landing前缀，basename会自动完成拼接：

<BrowserRouter basename="/agenda-landing">
    <GlobalStyle/>
    <NavBar/>
    <Switch>
      <Route path="/agente/:dni">
        <Landing/>
      </Route>
      <Route path="/">
        <ErrorPage/>
      </Route>
    </Switch>
    <Footer/>
</BrowserRouter>

3. 调整.htaccess重写规则 #

将.htaccess文件放在agenda-landing目录下，修改重写规则适配子目录，同时确认Apache已开启rewrite模块、站点目录配置中AllowOverride All已开启，保证.htaccess规则生效：

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

以上配置全部修改完成后，重新打包上传产物即可正常使用BrowserRouter。

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