React BrowserRouter在构建后不起作用答案

【问题标题】：React BrowserRouter not working after buildReact BrowserRouter在构建后不起作用
【发布时间】：2022-11-04 17:36:25
【问题描述】：

我有一个静态 html 网站，我想在其中一个页面（portfolio.html）的 div 中嵌入一个小型 React 应用程序。我的方法是使用 create-react-app 创建小部件，npm run build，然后将 build 文件夹转储到我的网站 /static 文件夹中。

portfolio.html 有一个 id 为“portfolio-container”的 div。因此，我在此页面上的脚本标记中链接了构建和缩小的 .js 文件夹。我已经对其进行了测试，当我渲染出一些随机的 jsx 时它可以工作，但我的问题是它不会渲染出我的任何路线。

这是渲染到根目录（#portfolio-container）的顶级组件：

import '../portfolio.css'
import Project from './Project'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import ProjectGrid from './ProjectGrid'

function App() {
  return (
    <Router basename={process.env.PUBLIC_URL}>
      <Routes>
        <Route path="/" element={<ProjectGrid />} />
        <Route path="/project/:id" element={<Project />} />
      </Routes>
    </Router>
  )
}

export default App

它可以在我的本地主机上运行，但是在我的网站中构建和使用之后，它不会在内部呈现任何内容（就像我说的，它确实在没有路由器的情况下工作，所以我知道我的问题不在于我如何嵌入 React 应用程序，但我如何配置路由器）。

我已经进行了一些研究，并且搞砸了诸如公共 url、basename、package.json 主页等之类的东西，但到目前为止我找不到任何有用的东西。我不知道这可能是我实施这些潜在解决方案的方式。

总而言之，我的应用程序在 localhost 上运行良好，但在使用 vs code 实时服务器查看时在我的静态 html 网站中构建和使用后，以及在线部署到域名后，它也需要运行。

非常感谢任何帮助。

【问题讨论】：

你知道如何解决这个问题吗？我不得不切换到 HashRouter 而不是 BrowserRouter 才能让它与构建文件夹一起工作。不过，我讨厌 URL 中的 # 符号。我宁愿 BrowserRouter 工作。

标签： reactjs path router basename

【解决方案1】：

我在 Apache HTTP 服务器上遇到了同样的问题，我通过引入 documentation 指定的 .htaccess 文件解决了这个问题。我不知道您想在哪个服务器上发布您的网站，所以我建议您查看我链接到的文档并找到适合您的解决方案！

【讨论】：