简体繁体 English

React Router 没有在生产中的嵌套路由上加载资产

[英]React Router not loading assets on nested routes in production

原文 2020-06-24 00:59:02 0 1 reactjs/ react-router/ production

Context语境

I'm setting up a project where I need to have a nested route "/user/:id" where the id is serves as a parameter that I can pass in.我正在建立一个项目，我需要一个嵌套路由“/user/:id”，其中 id 用作我可以传入的参数。

The Problem问题

In development mode everything (all components, static assets, etc.) loads properly.在开发模式下，一切（所有组件、static 资产等）都可以正确加载。 However, when I build the react project and serve it in production mode, some of the images are not being loaded and looking for the assets on some nested route off the root domain.但是，当我构建 react 项目并在生产模式下提供它时，一些图像没有被加载并在根域之外的一些嵌套路由上寻找资产。 (I don't fully understand how react grabs the files to be served, but I've attached images that might give insight into this predicament.) The error in grabbing the assets occur when I visit any site off of the "user" path eg /user/234, /user/23, etc. （我不完全理解 react 如何抓取要提供的文件，但我附上了可能会深入了解这种困境的图像。）当我访问“用户”路径之外的任何站点时，就会发生抓取资产的错误例如 /user/234、/user/23 等。

Below is an下面是一个

image of my "App.tsx" file which shows how I've set up routes我的“App.tsx”文件的图像，显示了我如何设置路线
the successful load of an asset in a path that's not "/user/"在不是“/user/”的路径中成功加载资产
a failed load of assets in production when it loads the image on a path off of "/user/" - eg "/user/12".当它在“/user/”的路径上加载图像时，生产中的资产加载失败 - 例如“/user/12”。

Thank you!谢谢！

应用程序

失败的

1 个解决方案

Turns out that all I needed to do was add <base href="/"> to the head of my index.html file!事实证明，我需要做的就是将<base href="/">添加到我的index.html文件的头部！