Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >react-static /edit/:id /nested路由在刷新/热加载时丢失对资产的引用

react-static /edit/:id /nested路由在刷新/热加载时丢失对资产的引用
EN

Stack Overflow用户
提问于 2019-11-21 20:02:48
回答 1查看 249关注 0票数 0

我对react-static还有点陌生,所以请容忍我。

在开发过程中和静态生成时,在诸如“/ page /edit/:id”之类的路由上刷新页面将更改图像资产的根引用。

我的路由:

代码语言:javascript
运行
AI代码解释
复制
<Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <Root>
        <header className="App-header">
          <Navbar />
        </header>
        <div className="content">
          <Router>
            <Landing path="/" />

            <Page1     key="page1"      path="/page1" />
            <Page1Edit key="page1-edit" path="/page1/edit/:id" />

            <NotFound  default />
          </Router>
        </div>
      </Root>
    </PersistGate>
  </Provider>

刷新根页面对该问题没有影响,但在编辑组件中时,如果刷新或有时是热负载命中,我将丢失所有图像资源引用,这些引用重新分配给组件本身的根。例如,工作时,导航栏徽标为

img/logo.jpg

但是,当在编辑组件中刷新时,资产将重写到

/edit/img/logo.jpg

EN

回答 1

Stack Overflow用户

发布于 2019-11-23 22:15:29

给定以下文件夹结构和文件

代码语言:javascript
运行
AI代码解释
复制
/public
    /imgs
        logo.png
/src 
    app.js
    app.css
    /pages
        index.js
        test.js
        /test
            test.js

--> app.js

代码语言:javascript
运行
AI代码解释
复制
import React, { Component}                        from 'react'
import { Router }                  from './components/Router'
import Navbar from "./components/NavBar"
import Index  from "./pages/index"
import Test   from "./pages/test/test"

{misc code setting up the component} 

render () {
    <Root>
        <header>
            <Navbar />
        </header>
        <div>
            <Router>
                <Index path="/" />
                <Test path="/test/test />
            </Router>

        </div>
    </Root>
}

--> Navbar.js

代码语言:javascript
运行
AI代码解释
复制
import React from "react";
export default () => {
    return (
        <div>
            <h1>navbar test </h1>
            <div className="logo">
                <img src="imgs/logo.png" />
            </div>

            <div>
                <Link to="/test">test</Link>
            </div>

        </div>
    )
}

--> index.js & test.js

代码语言:javascript
运行
AI代码解释
复制
import React from "react";

export default () => {
    return (
        <div>
            <h1>LOGO RESOLVE TESTS </h1>
            <img src="imgs/logo.png" />
        </div>
    )
}

--> test.js:

代码语言:javascript
运行
AI代码解释
复制
import React from "react";

export default () => {
    return (
        <div>
            <h1>subroute test </h1>
            <img src="imgs/logo.png" />
        </div>
    )
}

只要您从根位置启动会话,徽标就会解析。

如果“直接”导航到或刷新/test/test将重写资产URL,使其成为当前路由的子级。

是什么: imgs/logo.png

变成: test/imgs/logo.png

要克服此问题,请将img文件夹移动到/src中

我还不知道这是不是正确的方法,因为在我看来,将站点徽标这样的静态资产简单地放在公共文件夹中是明智的,而且还不清楚公共文件夹在这种情况下有什么好处。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58982890

复制
相关文章
Pentaho BI Server 批量上传文件排坑笔记
本文讲的是实际操作中的小问题和小技巧, 这里要谈谈Pentaho BI Server对文件夹的操作,在项目使用pentaho cde图表开发完图表后,通常会迁移cde图表文件来完成开发与部署不同环境下的图表迁移,在迁移过程中发现BI Server可以对Pentaho中文件夹进行下载,
ZhangXianSheng
2019/05/28
7660
6个用于大数据分析的最好工具
大数据是一个含义广泛的术语,是指数据集,如此庞大而复杂的,他们需要专门设计的硬件和软件工具进行处理。该数据集通常是万亿或EB的大小。这些数据集收集自各种各样的来源:传感器,气候信息,公开的信息,如杂志,报纸,文章。大数据产生的其他例子包括购买交易记录,网络日志,病历,军事监控,视频 和图像档案,及大型电子商务。
IT阅读排行榜
2018/08/15
1.2K0
6个用于大数据分析的最好工具
【性能分析】大数据分析工具
大数据是一个含义广泛的术语,是指数据集,如此庞大而复杂的,他们需要专门设计的硬件和软件工具进行处理。该数据集通常是万亿或EB的大小。这些数据集收集自各种各样的来源:传感器,气候信息,公开的信息,如杂志,报纸,文章。大数据产生的其他例子包括购买交易记录,网络日志,病历,军事监控,视频和图像档案,及大型电子商务。
Luga Lee
2022/03/25
1.2K0
【性能分析】大数据分析工具
大数据处理分析的六大工具
下面请看详细介绍: Hadoop Hadoop 是一个能够对大量数据进行分布式处理的软件框架。但是 Hadoop 是以一种可靠、高效、可伸缩的方式进行处理的。Hadoop 是可靠的,因为它假设计算元
用户1410343
2018/03/27
3.1K0
大数据处理分析的六大工具
6个用于大数据分析的最好工具
大数据是一个含义广泛的术语,是指数据集,如此庞大而复杂的,他们需要专门设计的硬件和软件工具进行处理。该数据集通常是万亿或EB的大小。这些数据集收集自各种各样的来源:传感器,气候信息,公开的信息,如杂志,报纸,文章。大数据产生的其他例子包括购买交易记录,网络日志,病历,军事监控,视频和图像档案,及大型电子商务。 在大数据和大数据分析,他们对企业的影响有一个兴趣高涨。大数据分析是研究大量的数据的过程中寻找模式,相关性和其他有用的信息,可以帮助企业更好地适应变化,并做出更明智的决策。 一 Hadoop Hadoo
小莹莹
2018/04/20
1.1K0
6个用于大数据分析的最好工具
【工具】六大工具帮你做好大数据分析
大数据是一个含义广泛的术语,是指数据集,如此庞大而复杂的,他们需要专门设计的硬件和软件工具进行处理。该数据集通常是万亿或EB的大小。这些数据集收集自各种各样的来源:传感器、气候信息、公开的信息、如杂志、报纸、文章。大数据产生的其他例子包括购买交易记录、网络日志、病历、事监控、视频和图像档案、及大型电子商务。大数据分析是在研究大量的数据的过程中寻找模式,相关性和其他有用的信息,可以帮助企业更好地适应变化,并做出更明智的决策。 Hadoop Hadoop 是一个能够对大量数据进行分布式处理的软件框架。但是
小莹莹
2018/04/20
9960
【工具】六大工具帮你做好大数据分析
6个用于大数据分析的最好工具
大数据是一个含义广泛的术语,是指数据集,如此庞大而复杂的,他们需要专门设计的硬件和软件工具进行处理。该数据集通常是万亿或EB的大小。这些数据集收集自各种各样的来源:传感器,气候信息,公开的信息,如杂志,报纸,文章。大数据产生的其他例子包括购买交易记录,网络日志,病历,军事监控,视频和图像档案,及大型电子商务。
IT阅读排行榜
2018/08/13
7130
6个用于大数据分析的最好工具
RocketMQ服务器及管理控制台安装 [中奖名单]
进入bin目录,建议修改runbroker.sh和runserver.sh默认JVM的大小,防止内存不足启动失败。参考设置如下
BUG弄潮儿
2020/11/19
1.6K0
RocketMQ服务器及管理控制台安装 [中奖名单]
DELL服务器iDRAC远程访问管理控制台使用
戴尔远程访问控制器(DRAC-Integrated Dell Remote Access Controller6 )控制台是管理站软件,旨在提供适用于戴尔系统的远程管理功能, 是一种系统管理硬件和软件解决方案,
全栈工程师修炼指南
2022/09/29
24.1K0
DELL服务器iDRAC远程访问管理控制台使用
dubbo管理控制台
1、在github下载dubbo源码 https://github.com/alibaba/dubbo
week
2018/08/24
2.1K0
dubbo管理控制台
pentaho中Invalid byte
上网一查,说是有中文,字体不相符,可是我没有写中文,为了能继续往后进行,修改了如下文件
py3study
2020/01/07
6180
pentaho8.1安装
本文主要介绍pentaho8.1的安装过程,重点介绍pentaho-server的安装。
Java架构师必看
2021/05/14
8960
pentaho8.1安装
大数据可视化项目开发总纲
下载地址:www.oracle.com/cn/downloads/index.html
ZhangXianSheng
2019/05/28
1.5K0
Dubbo03【管理控制台和监控中心搭建】
源码下载与编译   要搭建管理控制台和监控中心我们首先需要下载dubbo的源码并编译,首先去GitHub上下载Dubbo源码: https://github.com/apache/incubator
用户4919348
2019/04/02
1.1K0
Dubbo03【管理控制台和监控中心搭建】
7.Sentinel源码分析—Sentinel是怎么和控制台通信的?
在看我的这篇文章之前大家可以先看一下官方的这篇文章:https://github.com/alibaba/Sentinel/wiki/%E6%8E%A7%E5%88%B6%E5%8F%B0。介绍了控制台怎么使用,以及客户端要怎么设置才能被收集数据。
luozhiyun
2019/09/30
1.1K0
7.Sentinel源码分析—Sentinel是怎么和控制台通信的?
7.Sentinel源码分析—Sentinel是怎么和控制台通信的?
在看我的这篇文章之前大家可以先看一下官方的这篇文章:https://github.com/alibaba/Sentinel/wiki/%E6%8E%A7%E5%88%B6%E5%8F%B0。介绍了控制台怎么使用,以及客户端要怎么设置才能被收集数据。
luozhiyun
2019/09/28
9210
Cloudera Manager管理控制台
Cloudera Manager是一个用于管理、配置和监控CDP私有云基础集群和Cloudera Runtime服务的应用程序。
大数据杂货铺
2020/11/25
3K0
Cloudera Manager管理控制台
Jconsole-java监视和管理控制台的使用
Jconsole 监控java程序时,在启动java程序时,加上以下选项就可以进行远程监控:
yawn
2019/10/12
1.1K0
Jconsole-java监视和管理控制台的使用
Cloudera Manager管理控制台
Cloudera Manager管理控制台(Cloudera Manager Admin Console)是一个基于Web的用户界面,用于配置,管理和监控CDH。
Fayson
2018/03/30
4.8K0
「集成架构」ETL工具大比拼:Talend vs Pentaho
数据总是巨大的,任何行业都必须存储这些“数据”,因为它带有巨大的信息,从而导致他们的战略规划。正如人们需要房子感到安全一样,数据也必须得到保障。这个数据主页在技术上称为数据仓库。
架构师研究会
2019/09/08
2.3K0

相似问题

带有express的nodejs :每个视图的变量

10

Express - Nodejs - HTTPS服务器

10

将nodejs express静态请求重定向到https

480

Nodejs将服务器HTTP更改为HTTPS

12

NodeJS/Express自动检测SSL通过HTTP (HTTPS)解释?

11
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文