props.match.params.id 在我测试时有效，但在我使用 gh-pages 在 github 中部署时无效答案

【问题标题】：props.match.params.id works when I am testing but does not when I deploy in github with gh-pagesprops.match.params.id 在我测试时有效，但在我使用 gh-pages 在 github 中部署时无效
【发布时间】：2020-09-08 15:29:11
【问题描述】：

我正在使用Route 之类的<Route path="/:boardID" component={Board} />，并且我正在使用来自Board 组件的boardID 从this.props.match.params.boardID 获取它。当我用npm start 测试它时它工作正常。但是当我使用npm run deploy将它部署到github页面时它不起作用。

我知道，当我测试时，url 是localhost:3000/boardID-00，如果是 github 页面部署，它会变成username.github.io/projectname/boardID-00，这会导致问题。有没有办法让它适用于这两种情况？那么，在这两种情况下我都可以获取boardID 吗？

【问题讨论】：

标签： javascript reactjs github github-pages react-router-dom

【解决方案1】：

本周早些时候我整天都在为此苦苦挣扎。

如果您使用 HashRouter 作为路由器，您的路由在部署到 GitHub Pages 后应该可以工作。

如果您使用 BrowserRouter 作为路由器，则 GitHub Pages 无法在没有 # 帮助的情况下使用客户端路由。我尝试了 ludwiguer 的建议，但它对我不起作用，尽管它可能对其他人有用。

This article 帮助了我，我最终使用了 Firebase 托管，确保在 CLI 询问 Configure as a single-page app (rewrite all urls to /index.html)? 时在初始化过程中回答“是”

这是一个 GitHub 问题线程，您可能想看看 (Gh-pages deployment problems with react-router)，但由于我不想使用 HashRouter，唯一对我有用的方法是使用其他东西进行部署GitHub 页面。

【讨论】：

【解决方案2】：

看看这个答案React Router v4 baseName and custom history

基本上你可以根据你的环境为你的路由器添加一个 basename 属性

<BrowserRouter basename="/projectname">
  <App/>
</BrowserRouter>

【讨论】：