8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

React、BrowserRouter、Apache 和子目录

Maroof Kadiri 2月前

25 0

我有一个 React 应用,我正尝试将其部署到站点的子目录 - 例如 https://example.com/myapp。服务器使用 Apache。我已经配置了 package.json、BrowserRouter 和 .htaccess,如下所示...

我有一个 React 应用,正尝试将其部署到站点的子目录 - 例如 https://example.com/myapp 。服务器使用 Apache。我已配置 package.json、BrowserRouter 和 .htaccess,如下所示:

软件包.json:

"homepage": "https://example.com/myapp/"

浏览器路由器:

root.render(
  <React.StrictMode>
    <BrowserRouter basename="/myapp">
      <Routes>
        <Route path="/*" element={<App />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

https://example.com/myapp/.htaccess :

FallbackResource ./index.html

总体而言,这一切都按应有的方式运行,但有一个主要例外。

如果我尝试 https://example.com/myapp/users - 效果很好。

但是,如果我尝试 https://example.com/myapp/user/{userId} ,我会收到错误。

尽管我已指定了路线,但情况仍然如此:

<Route path="user/:userId" element={<UserProfile />} />

当我在 localhost:3000 以开发模式进行测试时,它确实运行良好。

认为 问题在于,当用户请求 https://example.com/myapp/user https://example.com/myapp https://example.com/myapp

但是,当用户请求 https://example.com/myapp/user/7 ,它正在寻找不存在的子子子文件夹,找不到 .htaccess 文件,因此引发错误。

长话短说,有办法处理这种情况吗?

帖子版权声明 1、本帖标题:React、BrowserRouter、Apache 和子目录
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Maroof Kadiri在本站《apache》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 根据 使用客户端路由 文档创建 React App Serving 应用程序, .htaccess 公共目录中的文件应类似于或包含以下规则:

    Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]
    

    所有 的根 index.html 文件返回 到您的 React 应用程序中。

  • 谢谢 Drew - 这正是我需要的!我在网上看到过一些声称可以解决这个问题的文章,但它们并没有起到什么作用。我的情况需要的是 QSA 标志;否则“更深层”的链接就会中断。

返回
作者最近主题: