在生产中部署后的 ReactJS 路由问题

Question

我的 ReactJS 应用程序 post 部署到生产域中的子目录时遇到一些路由问题。

我将构建文件放入我网站上的目录 www.xyz.com/folder1/appfolder/ 中，我在 package.json 中的主页属性设置为同一路径。我也尝试过使用 manifest.json "start_url": "./dashboard" 我的应用程序文件的路由定义如下

<Route exact path="/" component={DashboardPage} />

预期：当我运行在本地主机上时，一切正常，因为默认页面是我访问本地主机时的仪表板页面。但是当我访问时正在生产中

www.xyz.com/folder1/appfolder/

我希望仪表板页面能够加载，但它没有加载，但是出现了一个空白页面，其中包含所有左侧导航、页眉、页脚，没有任何内容。一旦我在侧边导航栏中点击 Dashboard link，页面就会加载，但是 URL

www.xyz.com/appfolder/ (missing folder1 in path)

如果我从下面的路径直接访问那么它也坏了

www.xyz.com/appfolder/

仅当我访问下方然后单击侧边导航栏仪表板时 link 然后它重定向到应用程序文件夹并加载页面。

www.xyz.com/folder1/appfolder/

请提出建议，因为缺少一些真正基本的东西，因此我遇到了这个问题。这是糟糕的用户体验。

Answer 1

尝试使用 hashrouter 而不是浏览器路由器。

所以在你的 app.js 中（如果这是你定义路线的地方）

像这样更改导入

来自

import { BrowserRouter } from 'react-router-dom'
...
<BrowserRouter>
  <Switch>
    <Route exact path="/" component={DashboardPage} />
    ....
  </Switch>
</BrowserRouter>

到

import { HashRouter } from 'react-router-dom'
...
<HashRouter>
  <Switch>
    <Route exact path="/" component={DashboardPage} />
    ....
  </Switch>
</HashRouter>

Answer 2

在您的 BrowserRouter

中设置 basename 道具

<BrowserRouter basename='folder1'>
...routes...
</BrowserRouter>

在生产中部署后的 ReactJS 路由问题

ReactJS routing issue after deployment in production

reactjs

react-router

react-router-dom