如何在主站子目录部署create-react-blog项目？

你需要在主站的/blog子目录部署create-react-blog创建的博客，与主站（create-react-app构建）共存。当前Express配置已将/blog路由指向博客构建文件，但访问http://localhost:3001/blog时博客渲染后返回Navi的404页面，仅能通过404链接跳转到根目录查看博客，此前尝试修改homepage、Router basename、PUBLIC_URL及navi.config.js均未解决问题。

正确实现步骤 #

1. 设置博客项目的package.json homepage #

在博客项目的package.json中，将homepage设置为/blog：

{
  "homepage": "/blog"
}

2. 修改博客的Router配置，添加basename #

找到博客项目中配置Navi Router的文件（通常是src/index.js或src/App.js），给Router组件添加basename="/blog"属性：

import { Router } from 'react-navi'

// ... 其他代码
<Router basename="/blog" routes={routes}>
  {/* 你的博客组件 */}
</Router>

3. 修正navi.config.js的getPagePathname函数 #

这个函数负责生成构建后页面的文件路径，不需要给URL添加/blog前缀（Express已负责将/blog路径映射到博客构建目录），还原为逻辑正确的写法：

import path from 'path'

export const renderPageToString = require.resolve('./src/renderPageToString')

export function getPagePathname({ url }) {
  if (url.pathname === '/rss') {
    return 'rss.xml'
  }
  if (url.pathname === '/') {
    return 'index.html'
  }
  return path.join(url.pathname.slice(1), 'index.html')
}

此前错误地给url.pathname添加/blog前缀，导致Navi内部路由匹配逻辑混乱——博客的路由定义本身基于根目录，只需让Express完成/blog路径到博客构建文件的映射即可。

4. 确认Express服务器配置与构建文件路径 #

你的现有Express配置已经正确，只需确保博客构建文件输出到projects/blog目录：

• 执行博客项目的构建命令：npm run build
• 将博客生成的build目录内容复制到主站的projects/blog目录下（或直接在博客项目中配置构建输出路径为../projects/blog）

重启Express服务器后，访问http://localhost:3001/blog即可正常渲染博客的所有路由，不会再出现404页面。

内容的提问来源于stack exchange，提问作者M. Chak