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

【问题标题】：ReactJS routing issue after deployment in production在生产中部署后的 ReactJS 路由问题
【发布时间】：2022-01-10 09:32:21
【问题描述】：

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

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

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

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

www.xyz.com/folder1/appfolder/

我希望仪表板页面可以加载，但它没有加载，但会出现一个空白页面，其中包含所有左侧导航、页眉、页脚，没有内容。一旦我点击侧导航中的仪表板链接，页面就会加载但使用此 URL

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

如果我采用下面的路径并直接访问，那么它也坏了

www.xyz.com/appfolder/

只有当我访问下面然后单击侧导航栏仪表板链接时，它才会重定向到 app 文件夹并加载页面。

www.xyz.com/folder1/appfolder/

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

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

在 BrowserRouter 中设置 basename 属性

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

【讨论】：

我试过这个。还是行不通。虽然有一些改进，但我现在可以在 URL 中获取文件夹。例如：
我试过这个。还是行不通。虽然有一些改进，但我现在可以在 URL 中获取文件夹。例如：www.xyz.com/folder1/appfolder/（单击侧边栏链接将我们带到）www.xyz.com/folder1/navpage1 etcc。而不是以前的 www.xyz.com/navpage1 有 2 个问题： www.xyz.com/folder1/appfolder/ 没有带我到 ('/' 重定向组件，在这种情况下设置为 'DashboardPage' 仍然没有显示. 第二个问题是路由路径仍然有问题在路径 www.xyz.com/folder1/navpage1 而不是预期的 domain/folder1/appfolder/navpage1 中缺少 appfolder
如果您的整个应用程序都在folder1/appfolder/ 中，那么将其用作您的基本名称......如果您的/appfolder/ 只是您的登录页面，并且您还有其他页面，例如/folder1/secondpage想要路由，你可以将你的根目录重定向到appfolder，比如<Route exact path="/" ><Redirect to="/appfolder" /> </Route>
谢谢你，我刚刚修复并工作了。

【解决方案2】：

尝试使用 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>

【讨论】：