React组件部署至GitHub后无法渲染，本地运行正常如何解决？

看起来你的问题核心在于GitHub Pages的子路径部署和React Router的路径匹配不兼容——本地开发时路由基于根路径/运行，但部署到GitHub Pages后，项目实际运行在子路径/junotechchallenge-miguel-albryan/下，这就导致路由找不到对应的组件了。

给你几个具体的解决步骤：

1. 确认package.json中的homepage配置 #

首先确保你的package.json里已经添加了正确的homepage字段，指向你的GitHub Pages地址：

"homepage": "https://miguelalbryan.github.io/junotechchallenge-miguel-albryan/"

这个配置会让React在build时自动把所有资源路径适配到子目录下。

2. 给React Router添加basename属性 #

你需要在包裹路由的BrowserRouter（或HashRouter）组件中添加basename属性，值为你的仓库名称。这样所有路由都会自动加上这个前缀，匹配部署后的实际路径：

import { BrowserRouter as Router, Route } from 'react-router-dom';

// 路由外层添加basename配置
<Router basename="/junotechchallenge-miguel-albryan">
  <Route exact path="/" component={Movies}/>
  <Route exact path="/moviedetails/:movieid" name="routename" component={MovieDetails}/>
</Router>

这里不用移除exact属性，它的作用是确保只有完全匹配路径时才渲染组件，对于根路径来说是必要的。

3. 重新build并部署 #

修改完配置后，重新执行build命令：

npm run build

如果你用gh-pages包部署，再运行：

npm run deploy

等待部署完成后刷新预览页面，应该就能正常渲染组件了。

额外注意：刷新404的问题 #

如果之后遇到刷新页面出现404的情况，这是GitHub Pages对单页应用的路由支持限制导致的。你可以二选一解决：

• 改用HashRouter代替BrowserRouter，哈希路由不会向服务器发送请求，所有路由处理都在前端完成；
• 在项目根目录创建public/404.html文件，内容和public/index.html完全一致，GitHub Pages会在找不到页面时返回这个文件，让React Router接管路由处理。

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